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;
}
执行结果