一、作用：
用于設置元素四個角的圓角效果，讓元素不再死板，更加柔和。

---

二、基本語法：
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 效果顯著