使用 border-radius 可实现元素圆角效果，基础语法为设置统一半径，如 .box { border-radius: 10px; }，也可用 % 创建圆形头像；支持分别控制四个角，按顺时针顺序赋值或使用命名属性；通过斜杠 / 分隔可设置椭圆圆角，如 20px / 10px；实用技巧包括与 overflow: hidden 配合裁剪内容、用 transition 实现悬停动画，且值过大时浏览器会自动限制。
想要让网页元素看起来更柔和、现代？使用 border-radius 属性是实现圆角效果最简单有效的方式。它能将方形的边框变成圆角，适用于按钮、图片、卡片、输入框等各种元素。掌握它的用法和技巧，可以显著提升页面的视觉体验。
基础语法：设置统一圆角
最简单的用法是为元素的四个角设置相同的圆角半径：
.box {
border-radius: 10px;
}
这会让元素的四个角都呈现 10px 的圆角。你也可以使用 em、% 或 rem 单位。特别是百分比，在圆形头像场景中非常实用：
.avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* 完美圆形 */
}
分别控制四个角
如果需要对每个角单独设置，可以传入多个值：
立即学习“前端免费学习笔记（深入）”；
.cool-box {
border-radius: 10px 20px 5px 15px;
}
这四个值按顺时针顺序分别对应：左上、右上、右下、左下。也可以使用命名属性精确控制：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
例如：
.card {
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
}
这样只让左上和右下角变圆，创造出独特的设计感。
椭圆圆角：x轴与y轴分开设置
border-radius 还支持两个半径值，分别控制水平和垂直轴的圆角曲率，语法是用斜杠 / 分隔：
.ellipse-corner {
border-radius: 20px / 10px;
}
这表示水平半径为 20px，垂直半径为 10px，形成椭圆角。你也可以为每个角分别指定双值：
.fancy-box {
border-radius: 10px 30px 10px 30px / 5px 10px 5px 10px;
}
</font>这种技巧常用于模拟对话气泡或特殊卡片样式。
实用技巧与注意事项
在实际开发中，有几个小技巧能避免常见问题：
- 当 border-radius 值大于元素高度一半时，会自动被浏览器限制为最大可用值，不会出错。
- 配合 overflow: hidden 使用，可以让子元素（如图片）也跟随父容器的圆角裁剪。
- 在按钮或卡片悬停效果中，动态改变 border-radius 可以实现有趣的动画：
.button:hover {
border-radius: 20px;
transition: border-radius 0.3s ease;
}
基本上就这些。border-radius 看似简单，但灵活运用能带来丰富的视觉变化，不复杂但容易忽略细节。
