HTML | DOM 样式 borderRadius 属性

borderRadius 属性用于设置元素边框的圆角弧度。

语法

element.style.borderRadius="值"

属性值

borderRadius 属性可以取以下值：

• length：表示圆角的弧度值，如 10px。
• percentage：表示百分比的圆角弧度值，如 50%。
• initial：设置属性为其默认值。
• inherit：从父元素继承 borderRadius 属性。

示例

设置元素的圆角弧度为 10px：

<div style="border-radius: 10px;">圆角矩形</div>

设置元素的圆角弧度为 50%：

<div style="border-radius: 50%;">椭圆形</div>

注意事项

• border-radius 属性可以单独设置 top-left、top-right、bottom-left 和 bottom-right 的圆角弧度，也可以同时设置四个角的圆角弧度。
• border-radius 属性在不同浏览器中可能会有不同的前缀。
• border-radius 属性不能用于替代图片的圆角，因为图片不是基于圆角计算的。如果要使用图片实现圆角，应该使用 CSS 的 background-image 属性。
• border-radius 属性不是一个标准化的 CSS 属性，因此在写样式时需要注意浏览器兼容性。