CSS border-end-start-radius 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border-end-start-radius属性用于定义元素的块方向末尾block-end和行内方向起始处inline-start之间的圆角半径。

border-end-start-radius具体效果与书写方向（writing-mode）、文本朝向（text-orientation）和文字方向（direction）属性密切相关。它们共同决定了元素的块方向和行内方向，进而影响border-end-start-radius所作用的具体边角。

默认值：	0
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderEndStartRadius="50px" Demo ❯

常用的实例

下面通过不同的演示实例，让你更直观地了解border-end-start-radius属性的用法。

1. 为元素的块方向末尾和行内方向起始处添加圆角：

实例代码运行代码

复制

.example1 {
    background-color: lightblue;
    border-end-start-radius: 50px;
}

.example2 {
    background-color: lightblue;
    border-end-start-radius: 50px 20px;
}

.example3 {
    background-color: lightblue;
    border-end-start-radius: 50%;
    direction: rtl;
}

.example4 {
    background-color: lightblue;
    border-end-start-radius: 50%;
    writing-mode: vertical-rl;
}

2. 块方向末尾和行内方向起始处的圆角位置受direction属性的影响：

实例代码运行代码

复制

.example {
    border: 2px solid black;
    direction: rtl;
    border-end-start-radius: 25px;
}

3. 块方向末尾和行内方向起始处的圆角位置受writing-mode属性的影响：

实例代码运行代码

复制

.example {
    border: 2px solid black;
    writing-mode: vertical-rl;
    border-end-start-radius: 25px;
}

CSS 语法

border-end-start-radius: 0|length|initial|inherit;

属性值

值	描述
`0`	默认值。
`length`	定义块级元素末尾和行内元素末尾处的圆角形状。参阅 CSS 单位。
`%`	以元素在对应轴上的长度的百分比定义此圆角形状。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。