border-radius用于设置元素边框圆角，提升视觉效果。可使用px或%定义半径，支持统一设置或单独控制四角，如border-top-left-radius。简写语法支持1至4个值，分别对应不同角的半径。设为50%可将正方形变为圆形，长方形变为椭圆，广泛应用于按钮、图片等设计中。
在CSS中，border-radius 属性用来给元素的边框添加圆角效果。它可以让原本直角的盒子变得圆润，常用于按钮、图片、卡片等设计中，提升视觉体验。
基本语法
border-radius 可以接受一个或多个长度值或百分比，表示圆角的半径大小。单位常用 px（像素）或 %（百分比）。
最简单的写法：
div {
border-radius: 10px;
}
这会让四个角都变成半径为10px的圆角。
立即学习“前端免费学习笔记（深入）”；
设置不同角的圆角
你可以单独控制每个角的圆角大小，使用以下四种属性：
- border-top-left-radius：左上角
- border-top-right-radius：右上角
- border-bottom-right-radius：右下角
- border-bottom-left-radius：左下角
例如：
div {
border-top-left-radius: 20px;
border-bottom-right-radius: 10px;
}
简写用法（多个值）
border-radius 支持1到4个值的简写方式，类似于 margin 或 padding：
-
一个值：四个角相同
border-radius: 15px; -
两个值：第一个为左上和右下，第二个为右上和左下
border-radius: 10px 20px; -
三个值：第一个为左上，第二个为右上和左下，第三个为右下
border-radius: 10px 20px 30px; -
四个值：按顺时针顺序：左上、右上、右下、左下
border-radius: 10px 20px 30px 40px;
制作圆形或椭圆
如果你想让一个正方形元素变成圆形，可以将 border-radius 设为宽度的一半或直接使用 50%：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
如果是长方形，50% 会生成椭圆效果。
基本上就这些。border-radius 使用简单，但能显著改善页面美观度，合理搭配能做出很多现代感十足的设计效果。不复杂但容易忽略细节。
