目录

border-radius

border-radius 该属性用作规定边框圆角。一个半径确定一个圆形；当使用两个半径时确定一个椭圆，该椭圆同边框的交集形成圆角效果。

 

语法

border-radius: radius             
border-radius: top-left-and-bottom-right top-right-and-bottom-left 
border-radius: top-left top-right-and-bottom-left bottom-right 
border-radius: top-left top-right bottom-right bottom-left 
border-radius: (first radius values) / radius             
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
border-radius: (first radius values) / top-left top-right bottom-right bottom-left 
border-radius: inherit

值

值描述
length 此关键词定义半径或椭圆的半长轴，半短轴。不可为负值。
<percentage> 此关键词定义圆形半径或椭圆的半长轴，半短轴。水平半轴对应盒模型的宽度；垂直半轴对应盒模型的高度。不可为负值。

例子

HTML 

<div id="red">
</div>

CSS 

#red {
     width: 400px;
     height: 200px;
     border: 2px dashed red;
     border-radius: 20px;
     }

执行结果

参考

相关链接

外部链接


跳至内容顶部