border-end-end-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-end-end-radius: 80px 80px;

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a bottom right rounded corner.
  </div>
</section>

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

æ¤å±æ§å½±ååç´ åæ«ä¸è¡æ«ä¹é´çæè§ãä¾å¦å¨ horizontal-tb ä¹¦åæ¨¡å¼å ltr è¡åæ¹åä¸ï¼æ¤å±æ§å¯¹åºäº border-bottom-right-radius å±æ§ã

è¯æ³

css

/* é¿åº¦å¼ */
/* ä½¿ç¨ä¸ä¸ªå¼æå¾æè§ä¸ºåå½¢ */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/* ä½¿ç¨ä¸¤ä¸ªå¼æå¾æè§ä¸ºæ¤åå½¢ */
border-end-end-radius: 1em 2em;

/* å¨å±å¼ */
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: revert;
border-end-end-radius: revert-layer;
border-end-end-radius: unset;

åå¼

<length-percentage>: è¡¨ç¤ºåçåå¾æèæ¤ååé¿è½´ååçè½´çå°ºå¯¸ãè¡¨ç¤ºç»å¯¹å°ºå¯¸å¯ç¨ CSS <length> æ°æ®ç±»åæåè®¸çä»»æåä½ãæ°´å¹³è½´çç¾åæ¯åç§ççå®½åº¦ï¼ç«ç´è½´çç¾åæ¯åç§ççé«åº¦ãè´å¼æ æã

å½¢å¼å®ä¹

åå§å¼	`0`
éç¨åç´	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
Percentages	refer to the corresponding dimension of the border box
è®¡ç®å¼	two absolute `<length>`s or `<percentage>`s
å¨ç»ç±»å	a length, percentage or calc();

å½¢å¼è¯æ³

border-end-end-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-end-end-radius: 10px;
}

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