圆角属性
最后更新：2026-09-13
border-radius 圆角属性
border-radius 用于将元素的直角边角变为圆角，是现代 UI 设计中最常用的装饰属性之一。它接受长度值或百分比值，值越大圆角越明显。当半径达到或超过边长的一半时，角会变成完整的半圆形或圆形。
| 分类 | |
|---|---|
| 初始值 | 0 |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | length |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ];⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<length> | 类型 | 固定圆角半径值 |
<percentage> | 类型 | 相对元素尺寸的百分比 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-radius | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10.5 |
| 所有主流浏览器均支持 | |||||
提示： border-radius: 50% 配合相等的宽高可以画出正圆形，常用于头像裁剪。
提示： 支持 1~4 个值，还可以用斜线语法分别设置水平半径和垂直半径，如 border-radius: 20px / 10px 实现椭圆角。
❓ 常见问题
Qborder-radius 对 img 图片有效吗？
A有效。border-radius 作用于元素的边框盒边缘，对 <img> 等替换元素同样适用。给图片设置 border-radius: 50% 并配合相等的宽高即可得到圆形头像。注意图片内容可能溢出圆角，通常建议容器加 overflow: hidden 配合使用。
Qborder-radius 的百分比值是相对什么的？
A百分比是相对于元素自身的宽度和高度计算的，水平半径相对宽度、垂直半径相对高度。因此 border-radius: 50% 在正方形元素上是正圆，在长方形元素上是椭圆。这个特性常用于制作圆形头像和胶囊按钮。
Q如何画出正圆和胶囊形状？
A正圆：元素宽高相等 + border-radius: 50%。胶囊按钮：border-radius: 999px，当值大于等于高度的一半时，两端会自动变成完整的半圆。长方形元素用 50% 得到的是椭圆，所以做胶囊建议用 999px 或足够大的固定像素值。
Q斜线语法 border-radius: 20px / 10px 是什么意思？
A斜线左侧是水平半径、右侧是垂直半径，可以生成椭圆形圆角。例如 border-radius: 50% / 25% 让水平弧度大于垂直弧度。省略斜线时水平、垂直半径相同。四个角还可以分别写两组斜线值，实现更自由的圆角形状。
🏷️ 相关属性
💡 相关案例
📚 相关教程
