border-radius 属性用于设置元素边框的圆角效果，通过指定半径使盒子四个角变圆润，支持单值统一设置或多个值分别控制每个角，还可单独定义各角属性；当值为 50% 时可创建圆形或椭圆，常用于按钮、卡片、头像等 ui 设计；该属性同时影响背景、边框、阴影及子元素溢出裁剪，合理运用可提升界面亲和力与视觉美观。
border-radius 属性用于设置元素边框的圆角效果，它能显著改变盒子的整体外观，让原本尖锐的直角变得圆润柔和。这个属性在设计按钮、卡片、头像等 UI 元素时非常常用。
圆角的基本作用
当给一个 div 或其他块级元素设置 border-radius 时，浏览器会将该元素的四个角按指定半径进行圆化处理。例如：
div { border-radius: 10px; }
会让盒子每个角都变成以 10px 为半径的四分之一圆弧。数值越大，圆角越明显；设为 50% 可以创建圆形或椭圆形外观，特别适用于头像显示。
分别控制四个角
border-radius 支持分别设置每个角的圆角大小，语法灵活：
立即学习“前端免费学习笔记（深入）”；
- 一个值：四个角相同（如 border-radius: 15px）
- 两个值：左上/右下，右上/左下（如 10px 20px）
- 三个值：左上，右上/左下，右下
- 四个值：顺时针顺序（左上、右上、右下、左下）
也可以使用具体属性单独控制：
border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0;
对背景和边框的影响
border-radius 不仅裁剪边框，也会影响背景图像和颜色的显示区域。背景会自动跟随圆角轮廓，不会超出圆弧边界。如果设置了 border-image 或 box-shadow，默认也会顺应圆角形状绘制。
注意：当元素有 overflow: hidden 时，其子元素超出部分也会被圆角裁切，这在制作图片卡片时非常实用。
创建特殊形状
通过调整不同角的半径比例，可以实现更多视觉效果：
- 胶囊形按钮：border-radius: 9999px 或 50%
- 对话气泡：三个角正常，一个角保持直角
- 椭圆进度条：长宽不等 + 50% 圆角
合理使用 border-radius 能提升界面亲和力，减少视觉压迫感。
基本上就这些，不复杂但容易忽略细节。