border-radius属性用于设置元素的边框圆角效果。它是、、和圆角属性的简写属性。

border-radius属性可以接收1-4个值，或者使用“/”来分隔左右两组值，每组值又可以带1-4个值。

如果border-radius属性的取值不带“/”符号，那么它的语法如下：

border-radius: [半径值] [半径值]? [半径值]? [半径值]?;                              
                            

如果只有一个值，那么这个值指定元素4个圆角的半径。

如果指定了2个值，那么第一个值指定元素的左上角和右下角的圆角半径，第二个值指定元素的右上角和左下角的圆角半径。

如果指定了3个值，那么第一个值指定左上角的圆角半径，第二个值指定右上角和左下角的圆角半径，第三个值指定右下角的圆角半径。

如果指定了4个值，那么第一个值指定左上角的圆角半径，第二个值指定右上角的圆角半径，第三个值指定右下角的圆角半径，第四个值指定左下角的圆角半径。

例如：

border-radius: 100px 200px 50px 60px;
/* 等效于 */
border-top-left-radius:     100px;
border-top-right-radius:    200px;
border-bottom-right-radius: 50px;
border-bottom-left-radius:  60px;

border-radius: 100px 200px 50px;
/* 等效于 */
border-top-left-radius:     100px;
border-top-right-radius:    200px;
border-bottom-right-radius: 50px;
border-bottom-left-radius:  200px;

border-radius: 100px 200px;
/* 等效于 */
border-top-left-radius:     100px;
border-top-right-radius:    200px;
border-bottom-right-radius: 100px;
border-bottom-left-radius:  200px;
                            

如果border-radius属性的取值带有“/”符号，那么在“/”符号两侧分别可以带1-4个值。它的语法如下：

border-radius: [左上角水平方向圆角半径] [右上角水平方向圆角半径]? [右下角水平方向圆角半径]? [左下角水平方向圆角半径]? / 
[左上角垂直方向圆角半径] [右上角垂直方向圆角半径]? [右下角垂直方向圆角半径]? [右下角垂直方向圆角半径]?                            
                            

“/”分隔符号前面部分的值代表水平方向的圆角半径，后面的部分代表垂直方向的圆角半径。通常使用这种语法来制作不等比的圆角效果。前面部分和后面部分的值的顺序和上面不带分隔符号情况描述的相同。例如：

border-radius: 100px 50px 30px / 60px 25px 20px;
/* 等效于 */
border-top-left-radius:     100px 60px;
border-top-right-radius:    50px 25px;
border-bottom-right-radius: 30px 20px;
border-bottom-left-radius:  50px 25px;

border-radius: 100px 50px 30px / 60px 25px;
/* 等效于 */
border-top-left-radius:     100px 60px;
border-top-right-radius:    50px 25px;
border-bottom-right-radius: 30px 60px;
border-bottom-left-radius:  50px 25px;                             
                            

如果元素有背景颜色或背景图像，那么背景也会被圆角剪裁。

如果为一个元素设置了，边框图像不会被圆角剪裁。

如果没有为一个元素设置足够大的padding值，那么在元素圆角的地方，文字内容可能会在圆角之外。例如：

注意：在圆角弧线之外的边框区域不会接收元素的pointer事件。

要制作一个正圆效果，可以将元素的宽度和高度设置为相等，并且圆角设置为50%：border-radius: 50%;，得到下面的效果：

官方语法

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

参数：

• <length>：使用数据类型来指定圆角半径。不允许为负数。
• <percentage>：使用数据类型来指定圆角半径。百分比是相对于元素的border box的百分比值，不允许为负数。

border-radius属性的初始值为0 0 0 0。

应用范围

CSS border-radius属性可以应用在所有的元素上。但是浏览器不会将该属性应用到属性的值为collapse的表格和内联表格（inline-table）上。

在线演示

浏览器支持

除了IE8及以下版本的IE浏览器和Opera Mini 8浏览器不支持border-radius属性，其它浏览器都支持该属性。完整的兼容性列表查看下图：