border-start-start-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2021å¹´9æâ©.

border-start-start-radius ã¯ CSS ã®ããããã£ã§ãè¦ç´ ã®è«ççãªå¢çã®åå¾ãå®ç¾©ãã¾ããããã¯è¦ç´ ã® writing-mode, direction, text-orientation ã«å¿ãã¦ãç©ççãªå¢çã®åå¾ã«å¯¾å¿ã¥ãããã¾ããããã¯ããã¹ãã®æ¹åãæ¸åæ¹åã«ä¾åããã«ã¹ã¿ã¤ã«ãæ§ç¯ããéã«ä¾¿å©ã§ãã

è©¦ãã¦ã¿ã¾ããã

border-start-start-radius: 80px 80px;

border-start-start-radius: 250px 100px;
direction: rtl;

border-start-start-radius: 50%;
writing-mode: vertical-lr;

border-start-start-radius: 50%;
writing-mode: vertical-rl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    ãã®ããã¯ã¹ã¯ãå·¦ä¸ã®è§ãä¸¸ããªã£ã¦ãã¾ãã
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

ãã®ããããã£ã¯ãè¦ç´ ã® block-start ã¨ inline-start ã®éã®è§ã«å½±é¿ãã¾ããããªãã¡ãæ¸åæ¹åã horizontal-tb ã§ ltr ã®æ¹åã§ããã°ã border-top-left-radius ããããã£ã«å¯¾å¿ãã¾ãã

æ§æ

css

/* <length> å¤ */
/* å¤ 1 ã¤ã®å ´åã¯è§ãåã«ãã */
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/* å¤ 2 ã¤ã®å ´åã¯è§ãæ¥åã«ãã */
border-start-start-radius: 1em 2em;

/* ã°ãã¼ãã«å¤ */
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: revert;
border-start-start-radius: revert-layer;
border-start-start-radius: unset;

å¤

<length-percentage>: åã®åå¾ã¾ãã¯æ¥åã®é·åå¾åã³çåå¾ãç¤ºãã¾ããçµ¶å¯¾çãªé·ãã®å ´åã¯ã CSS ã® <length> ãã¼ã¿åã§è¡¨ç¾ãããã¨ãã§ãã¾ããæ°´å¹³è»¸ã®ãã¼ã»ã³ãå¤ã¯ããã¯ã¹ã®å¹ãåç´è»¸ã®ãã¼ã»ã³ãå¤ã¯ããã¯ã¹ã®é«ãã«å¯¾ããå¤ã§ããè² ã®æ°ã¯ç¡å¹ã§ãã

å¬å¼å®ç¾©

åæå¤	`0`
é©ç¨å¯¾è±¡	ãã¹ã¦ã®è¦ç´ ããã ããã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãã¯ `border-collapse` ã `collapse` ã§ããå ´åã«`table` ããã³ `inline-table` è¦ç´ ã«é©ç¨ããå¿è¦ã¯ãªããåé¨è¡¨è¦ç´ ã§ã®åä½ã¯ãä»ã®ã¨ããæªå®ç¾©ãã `::first-letter` ã«ãé©ç¨ããã¾ãã
ç¶æ¿	ãªã
ãã¼ã»ã³ãå¤	å¢çããã¯ã¹ã®å¯¾å¿ããå¯¸æ³ã«å¯¾ããç¸å¯¾å¤
è¨ç®å¤	ï¼ã¤ã®çµ¶å¯¾çãª `<length>` ã¾ãã¯ `<percentage>` å¤
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	length ã¾ãã¯ ãã¼ã»ã³ãå¤, calc();

å½¢å¼ææ³

border-start-start-radius = 
  <border-radius>  

<border-radius> = 
  <slash-separated-border-radius-syntax>  |
  <legacy-border-radius-syntax>           

<slash-separated-border-radius-syntax> = 
  <length-percentage [0,â]> [ / <length-percentage [0,â]> ]?  

<legacy-border-radius-syntax> = 
  <length-percentage [0,â]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

ä¾

ç¸¦æ¸ãã®æã®å¢çã®ä¸¸ã

HTML

html

<div>
  <p class="exampleText">è§ä¸¸ã®ä¾</p>
</div>

CSS

css

div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}