CSS | border-top-right-radius 属性

简介

border-top-right-radius 属性设置元素右上角的圆角半径。

语法如下：

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

• <length>：以px、em等为单位的长度值。
• <percentage>：以%为单位的长度值。

例子

使用 border-top-right-radius 属性设置元素右上角圆角半径：

div {
    border-top-right-radius: 10px;
}

上面的代码会将 div 元素的右上角的圆角半径设置为 10px。

同时也可以设置横向和竖向圆角半径，如下所示：

div {
    border-top-right-radius: 10px 20px;
}

上面的代码将 div 元素的右上角横向圆角半径设置为 10px，竖向圆角半径设置为 20px。

另外，也可以按照顺序设置四个角的圆角半径，如下所示：

div {
    border-top-right-radius: 10px 20px 30px 40px;
}

上面的代码将 div 元素的右上角、右下角、左下角、左上角的圆角半径依次设置为 10px、20px、30px、40px。

兼容性

border-top-right-radius 属性兼容性如下：

| Chrome | Firefox | Safari | Opera | IE | Edge | | ------ | ------- | ------ | ----- | -- | ---- | | 4.0 | 4.0 | 5.0 | 10.5 | 9 | 12 |

总结

border-top-right-radius 属性可以很方便地设置元素右上角的圆角半径，它的语法也较为简单。需要注意的是，该属性对于不支持圆角的浏览器需要进行兼容处理。