border-end-end-radius

The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

试试

This property affects the corner between the block-end and the inline-end sides of the element. For instance, in a horizontal-tb writing mode with ltr direction, it corresponds to the border-bottom-right-radius property.

语法

css
/* <length> values */
/* With one value the corner will be a circle */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/* With two values the corner will be an ellipse */
border-end-end-radius: 1em 2em;

/* Global values */
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;

Values

<length-percentage>

表示圆形半径的大小或椭圆的长半轴和短半轴。作为绝对长度，它可以用 CSS <length> 数据类型允许的任何单位表示。水平轴的百分比指的是盒子的宽度，垂直轴的百分比指的是盒子的高度。负值无效。

正式定义

初始值0
应用于所有元素；但用户代理不需要将它应用于 border-collapse 为 collapse 的 table 和 inline-table 元素。目前，对内部表格元素的行为是未定义的。它也适用于 ::first-letter.
继承否
百分比指的是边框盒的对应维度
计算值两个绝对 <length> 或 <percentage>
动画类型一个 长度，百分比 或 calc();

正式语法

border-end-end-radius = 
  <length-percentage [0,∞]>{1,2}  

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

示例

带垂直文本的边框半径

HTML

html
<div>
  <p class="exampleText">Example</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;
}

结果

规范

规范
CSS 逻辑属性和值级别 1
# border-radius-properties

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅