border-radius属性可创建圆角效果，提升UI美观度；支持多值写法设置四角半径，可用像素或百分比；50%可生成圆形或胶囊按钮；可单独控制每个角，如border-top-left-radius；影响边框、背景和阴影的渲染，合理运用能增强视觉层次与用户体验。
在网页设计中，通过 border-radius 属性可以让元素的边框变得圆润，提升视觉效果和用户体验。它能将原本生硬的直角矩形变成柔和的圆角形状，广泛应用于按钮、卡片、头像等 UI 元素中。
基本语法与用法
border-radius 是一个简写属性，可以同时设置四个角的圆角半径。它的值可以是像素（px）、百分比（%）或 em 等长度单位。
常见写法：-
border-radius: 10px;— 四个角都是 10px 的圆角 -
border-radius: 5px 10px 15px 20px;— 顺时针设置：左上、右上、右下、左下 -
border-radius: 10px 20px;— 水平方向 10px，垂直方向 20px -
border-radius: 50%;— 制作圆形或椭圆
单独控制每个角
如果只想修改某个特定角，可以使用以下四个独立属性：
-
border-top-left-radius：左上角 -
border-top-right-radius：右上角 -
border-bottom-right-radius：右下角 -
border-bottom-left-radius：左下角
例如：border-top-left-radius: 15px; 只让左上角变圆。
立即学习“前端免费学习笔记（深入）”；
实现圆形与胶囊形状
利用 border-radius 还能快速创建特殊形状：
-
圆形头像：给正方形元素设置
border-radius: 50% -
胶囊按钮：长方形元素使用较大的圆角，如
border-radius: 50px
这类设计在现代界面中非常常见，看起来更友好、更具动感。
结合盒模型与其他样式
border-radius 会作用于 border、background 和 box-shadow 的渲染区域。默认情况下，背景也会被裁剪成圆角形状。若想让阴影保持直角，可使用 box-shadow 配合偏移实现。
注意：当元素有边框（border）时，圆角会影响边框的呈现方式，边框也会随之弯曲。
基本上就这些。合理使用 border-radius 能显著提升页面美观度，不复杂但容易忽略细节。根据设计需求灵活调整数值，就能让元素更有层次感和亲和力。
