border-radius属性可设置元素圆角，支持统一、分角、椭圆及单独控制，用于美化按钮、图片等。
设置元素边框圆角非常简单，使用 border-radius 属性即可。它可以让你的矩形元素变成带圆角的样式，适用于按钮、图片、卡片等常见场景。
基本语法
border-radius 可以接受一个或多个长度值或百分比，表示四个角的圆角半径大小。
常用单位：px、em、rem、%。示例：
.box {
border-radius: 10px;
}
这会让元素的四个角都变成 10px 的圆角。
立即学习“前端免费学习笔记（深入）”；
分别设置四个角
你也可以为每个角单独设置不同的圆角大小，按顺时针顺序：左上、右上、右下、左下。
示例：
.box {
border-radius: 10px 5px 20px 8px;
}
- 左上角：10px
- 右上角：5px
- 右下角：20px
- 左下角：8px
水平和垂直半径（椭圆圆角）
如果想创建椭圆形的圆角，可以用斜杠 / 分隔横向和纵向半径。
示例：
.box {
border-radius: 20px / 10px;
}
表示所有角的水平半径为 20px，垂直半径为 10px。
单独控制某一个角
CSS 还提供了四个子属性，用于单独设置每个角：
- border-top-left-radius：左上角
- border-top-right-radius：右上角
- border-bottom-right-radius：右下角
- border-bottom-left-radius：左下角
示例：
.circle-img {
border-top-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px;
}
制作圆形或胶囊形状
想让一个正方形元素变成圆形？把 border-radius 设为 50% 即可。
示例：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
如果是长方形元素，设为 50% 会变成胶囊形状：
.capsule {
padding: 10px 20px;
border-radius: 50px;
}
基本上就这些。border-radius 使用灵活，掌握好单位和写法，能快速美化页面元素外观。 
