CSS border-radius 属性
CSS border-radius 属性允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
实例
向 div 元素添加圆角边框：
<!DOCTYPE html><html><head><style>div{text-align:center;border:2px solid #a1a1a1;padding:10px 40px;background:#dddddd;width:350px;border-radius:25px;-moz-border-radius:25px; /* 老的 Firefox */}</style></head><body><div>border-radius 属性允许您向元素添加圆角。</div></body></html>
页面底部有更多实例。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 5.04.0 -webkit- | 9.0 | 4.03.0 -moz- | 5.03.1 -webkit- | 10.5 |
定义和用法
CSS border-radius 属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。
当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。
提示：该属性允许您为元素添加圆角边框！
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.borderRadius="5px" |
语法
border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
| 值 | 描述 | 测试 |
|---|---|---|
| length | 定义圆角的形状。 | 测试 |
| % | 以百分比定义圆角的形状。 | 测试 |
例子 1
border-radius:2em;
等价于：
border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;
相关页面
CSS 教程：CSS 边框