border-radius是CSS中用于设置元素边框圆角的属性，通过调整该属性的取值，可以让原本直角的盒子变成圆角、圆形或者椭圆形状，是前端页面美化中非常常用的属性之一。
border-radius基础语法
border-radius的语法格式非常灵活，支持1到4个参数取值，不同数量的参数对应不同的圆角设置规则：
- 1个参数：四个角的圆角半径相同
- 2个参数：第一个参数设置左上角、右下角，第二个参数设置右上角、左下角
- 3个参数：第一个参数设置左上角，第二个参数设置右上角、左下角，第三个参数设置右下角
- 4个参数：按照左上角、右上角、右下角、左下角的顺序依次设置
取值可以是固定像素值，也可以是百分比，百分比是相对于元素自身的宽度和高度来计算的。
基础使用示例
下面是一个最基础的使用示例，给一个div元素设置统一的圆角半径：
/* 给类名为box的元素设置10px的圆角 */
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
border-radius: 10px;
}
对应的HTML结构如下：
<div class="box"></div>
单角圆角设置
如果只需要设置某一个角的圆角，可以使用对应的单角属性，分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius：
/* 只设置左上角为20px圆角，其他角保持直角 */
.single-corner {
width: 200px;
height: 100px;
background-color: #2196F3;
border-top-left-radius: 20px;
}
实现圆形和椭圆
当元素的宽高相等，且border-radius设置为50%时，元素会呈现圆形；如果宽高不等，border-radius设置为50%则会呈现椭圆：
/* 圆形 */
.circle {
width: 150px;
height: 150px;
background-color: #FF9800;
border-radius: 50%;
}
/* 椭圆 */
.ellipse {
width: 200px;
height: 100px;
background-color: #9C27B0;
border-radius: 50%;
}
椭圆角设置
border-radius还支持设置椭圆角，也就是水平半径和垂直半径不同的情况，语法是水平半径/垂直半径：
/* 左上角为水平20px、垂直40px的椭圆角 */
.ellipse-corner {
width: 200px;
height: 150px;
background-color: #F44336;
border-top-left-radius: 20px/40px;
}
常见注意事项
- border-radius不会影响元素的内容区域，只会改变边框和背景的绘制范围
- 如果元素设置了overflow:hidden，内容也会被圆角裁剪
- 旧版本浏览器可能需要添加前缀，比如-webkit-border-radius、-moz-border-radius，不过现在主流浏览器已经不需要前缀支持
border-radius是CSS3新增的属性，目前所有主流现代浏览器都支持该属性，使用时不需要担心兼容性问题。
border-radiusCSS圆角样式前端布局修改时间：2026-07-16 17:21:27