CSS 属性 border-end-end-radius 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。

{{InteractiveExample("CSS Demo: border-end-end-radius")}}

```css interactive-example-choice border-end-end-radius: 80px 80px;


```css interactive-example-choice
border-end-end-radius: 250px 100px;
direction: rtl;

```css interactive-example-choice border-end-end-radius: 50%; writing-mode: vertical-lr;


```css interactive-example-choice
border-end-end-radius: 50%;
writing-mode: vertical-rl;

```html interactive-example

This is a box with a bottom right rounded corner. 


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

此属性影响元素块末与行末之间的拐角。例如在 horizontal-tb 书写模式和 ltr 行内方向下，此属性对应于 {{CSSXref("border-bottom-right-radius")}} 属性。

语法

/* 长度值 */
/* 使用一个值所得拐角为圆形 */
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 {{CSSXref("<length>")}} 数据类型所允许的任意单位。水平轴的百分比参照盒的宽度，竖直轴的百分比参照盒的高度。负值无效。

形式定义

{{CSSInfo}}

形式语法

{{CSSSyntax}}

示例

竖排文本的边框半径

HTML

<div>
  <p class="exampleText">示例</p>
</div>

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;
}

结果

{{EmbedLiveSample("竖排文本的边框半径", 140, 140)}}