一、作用：
用于设置元素四个角的圆角效果，让元素不再死板，更加柔和。

---

二、基本语法：
border-radius: 圆角大小;

单位：px（像素）或 %（百分比）

示例：
div {
 border-radius: 10px;
}

---

三、常见写法：

1）统一圆角：
 border-radius: 10px;  （四个角都是 10px）

2）上下对称：
 border-radius: 10px 20px;  （左上右下为 10px，右上左下为 20px）

3）四个角分别设置（顺时针）：
 border-radius: 10px 20px 30px 40px;
 （左上、右上、右下、左下）

4）单独设置某一个角：
 border-top-left-radius: 15px;
 border-bottom-right-radius: 5px;

---

四、实现圆形：

元素宽高相等 + 圆角 50% → 圆形容器或头像

示例：
div {
 width: 100px;
 height: 100px;
 border-radius: 50%;
}

---

五、常用场景示例：

按钮圆角：
button {
 border-radius: 6px;
}

头像圆形：
img {
 border-radius: 50%;
}

提示框圆角卡片：
.card {
 border-radius: 8px;
}

---

六、总结记忆：

• 所有角一样： border-radius: 10px;

• 顺时针四角： border-radius: 上右下左;

• 圆形头像：  border-radius: 50%;

• 常与背景、边框、阴影一起使用，美化 UI 效果显著