CSS | border-end-start-radius 属性

介绍

border-end-start-radius 属性用于设置边框的结束端点开始弧度。它通常与 border-end-end-radius 属性一起使用，用于定义边框的圆角。

该属性是 CSS3 中的属性，对于某些浏览器（如 Internet Explorer）可能不被支持。

语法

border-end-start-radius: <length> | <percentage> | [ [ <length> | <percentage> ]{1,2} && right || [ <length> | <percentage> ]{1,2} && top ]? 

• <length>: 指定长度单位的长度值。
• <percentage>: 指定百分比的长度值。
• right: 指定设置右边框的圆角。
• top: 指定设置上边框的圆角。

示例

设置右上圆角

border-end-start-radius: 10px 20px; /* 右上圆角半径值分别为 10px 和 20px */

单独设置右边框的圆角

border-end-start-radius: 10px; /* 右上和右下圆角半径值分别为 10px */
border-end-start-radius: 0px 10px; /* 右上圆角半径值为 0，右下圆角半径值为 10px */
border-end-start-radius: 10px 0px; /* 右上圆角半径值为 10px，右下圆角半径值为 0 */

设置百分比圆角

border-end-start-radius: 50% 25%; /* 右上圆角半径值为宽度的一半，右下圆角半径值为宽度的四分之一 */

浏览器兼容性

| Chrome | Edge | Firefox | Safari | Opera | |--------|------|---------|--------|-------| | 57+ | 79+ | 55+ | 11.1+ | 44+ |

参考文献

• MDN Web Docs - border-end-start-radius