CSS border-radius 属性

向 div 元素添加圆角边框：

#example1 {
border: 2px solid red;
border-radius: 25px;
}

#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}

下面有更多实例。

定义和用法

border-radius 属性定义圆角边框。

提示: 此属性允许您向元素添加圆角！

此属性可以有一到四个值。规则如下：

4 个值 - border-radius: 15px 50px 30px 5px; (第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角):

3 个值 - border-radius: 15px 50px 30px; (第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角):

2 个值 - border-radius: 15px 50px; (第一个值应用于左上角和右下角，第二个值应用于右上角和左下角):

1 个值 - border-radius: 15px; (该值适用于所有四个角，四个角的圆角相等:

默认值:	0
继承性:	no
支持动画:	yes. 阅读有关动画的信息测试一下
版本:	CSS3
JavaScript 语法:	object.style.borderRadius="25px" 测试一下

表中的数字表示支持该属性的第一个浏览器版本。

紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
border-radius	5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

注释: 四个值按左上角、右上角、右下角和左下角的顺序给出。如果省略左下角，则与右上角相同。如果省略右下角，则与左上角相同。如果省略右上角，则与左上角相同。