在css样式开发中，border-radius是专门用来设置元素边框圆角的属性，通过它可以让原本直角的元素边角变得圆润，提升页面的视觉效果。这个属性支持多种参数写法，能够满足不同场景下的圆角需求。
border-radius基本语法
border-radius属性的基本语法格式为border-radius: 值;，这里的取值可以是长度单位（如px、em、rem）或者百分比，百分比是相对于元素自身的宽度和高度来计算的。
当只设置一个值时，这个数值会同时应用到元素的四个角，让四个角的圆角大小一致。下面是一个简单的示例：
/* 设置div元素四个角的圆角都为10px */
.rounded-box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 10px;
}
分别设置四个角的圆角
如果需要给四个角设置不同的圆角大小，border-radius支持多值写法，规则如下：
- 设置1个值：四个角都应用这个值
- 设置2个值：第一个值对应左上角和右下角，第二个值对应右上角和左下角
- 设置3个值：第一个值对应左上角，第二个值对应右上角和左下角，第三个值对应右下角
- 设置4个值：按照左上角、右上角、右下角、左下角的顺时针顺序依次应用
以下是多值写法的代码示例：
/* 四个角分别设置不同的圆角大小 */
.different-corners {
width: 200px;
height: 100px;
background-color: #e8f4ff;
border: 1px solid #91caff;
/* 左上角8px，右上角16px，右下角24px，左下角32px */
border-radius: 8px 16px 24px 32px;
}
单独设置某个方向的圆角
除了统一设置四个角，还可以单独设置某个角的圆角，对应的属性如下：
| 属性名 | 作用 |
|---|---|
| border-top-left-radius | 设置左上角圆角 |
| border-top-right-radius | 设置右上角圆角 |
| border-bottom-right-radius | 设置右下角圆角 |
| border-bottom-left-radius | 设置左下角圆角 |
单独设置圆角的代码示例：
/* 只设置左上角和右下角为圆角 */
.single-corner {
width: 200px;
height: 100px;
background-color: #f6ffed;
border: 1px solid #b7eb8f;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
椭圆圆角设置
border-radius还支持设置椭圆圆角，也就是水平方向和垂直方向的圆角半径不同，语法为border-radius: 水平半径/垂直半径;，同样支持多值写法。
椭圆圆角的代码示例：
/* 设置椭圆圆角，水平半径20px，垂直半径10px */
.ellipse-corner {
width: 200px;
height: 100px;
background-color: #fff7e6;
border: 1px solid #ffd591;
border-radius: 20px/10px;
}
常见应用场景
border-radius在实际开发中有很多常见应用：
- 制作圆形头像：将正方形元素的border-radius设置为50%即可
- 制作胶囊形状按钮：设置较大的圆角值，通常和高度的一半一致
- 卡片容器圆角：给卡片容器设置小数值的圆角，提升视觉柔和度
圆形头像的实现代码示例：
/* 正方形元素设置50%圆角变为圆形 */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
注意事项
使用border-radius时需要注意以下几点：
- 如果元素设置了overflow:hidden属性，圆角内部的超出内容会被裁剪
- 当圆角值大于元素边长的一半时，效果会等同于设置为边长的一半
- border-radius可以和border、background等属性配合使用，不会影响其他属性的正常生效
需要注意的是，border-radius是css3新增的属性，在非常老旧的浏览器（如IE8及以下版本）中不支持，不过现在这类浏览器的使用占比已经极低，基本可以忽略兼容性问题。
cssborder-radius边框圆角前端样式修改时间：2026-07-07 14:57:24