border-radius是CSS中用于创建圆角的核心属性，可通过像素或百分比设置半径，实现从简单圆角到椭圆、非对称形状的复杂效果。它支持统一值、四值语法及单独控制每个角，结合box-shadow可生成贴合圆角的阴影，与background-clip配合能精确裁剪背景，通过transition实现圆角动画，提升交互体验。需注意overflow:hidden对内容裁剪的影响、outline不随圆角路径显示的问题，以及复杂用法下的渲染性能。该属性在现代浏览器兼容性良好，是塑造现代UI视觉风格的重要工具。
border-radius属性是CSS中用来给元素边框设置圆角的核心工具。它允许你通过简单的数值或百分比定义圆角的半径，从而将原本方正的盒子变得柔和起来，甚至是完全的圆形或椭圆形。在我看来，这不仅仅是一个样式属性，它更是前端设计中塑造元素形态、提升用户体验的关键一环。
要通过
border-radius设置圆角，最直接的方式就是给元素指定一个或多个半径值。这个属性的灵活性在于，你可以一次性设置所有四个角的圆角，也可以单独控制每个角，甚至能创建椭圆形的圆角。
最常见的用法是给所有角设置一个统一的圆角半径：
.box {
border-radius: 10px; /* 所有四个角都是10px的圆角 */
}如果你想让对角线的圆角半径相同，可以这样写：
立即学习“前端免费学习笔记（深入）”；
.box {
border-radius: 10px 20px; /* 左上/右下是10px，右上/左下是20px */
}而要分别控制四个角的圆角（顺序是左上、右上、右下、左下），则需要四个值：
.box {
border-radius: 10px 20px 30px 40px; /* 左上10px, 右上20px, 右下30px, 左下40px */
}当然，你也可以用更细致的属性来控制每个角：
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius。这些属性也支持双值语法，用来创建椭圆角。
.box {
border-top-left-radius: 20px 10px; /* 左上角，水平半径20px，垂直半径10px */
}值可以是像素（
px）、百分比（
%）、
em或
rem。百分比值是相对于元素自身的宽度和高度来计算的，比如
border-radius: 50%;就能将一个正方形变成圆形，将长方形变成椭圆形。
掌握border-radius
的多种用法：如何实现非对称和椭圆圆角？
说起来，
border-radius这玩意儿，初看简单，但深挖下去，能玩出不少花样。非对称和椭圆圆角就是它展现强大之处的地方。很多时候，我们不满足于规规矩矩的圆角，而是想让设计更具动感和个性。
要实现非对称圆角，最直接的方式就是利用
border-radius的四值语法，或者单独设置每个角的半径。比如，你想让一个按钮的左上角和右下角更圆润，而右上角和左下角稍微硬朗一些，就可以这样：
.asymmetric-button {
border-radius: 20px 5px 20px 5px; /* 左上20px, 右上5px, 右下20px, 左下5px */
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
}这样就能得到一个视觉上更活泼、不那么呆板的按钮。我个人觉得，这种细微的不对称感，反而更能吸引用户的目光。
而椭圆圆角，则是通过
border-radius的“水平半径 / 垂直半径”语法来实现的。这个斜杠（
/）是关键。当你提供两个值并用斜杠分隔时，第一个值定义了圆角的水平半径，第二个值定义了垂直半径。
.elliptical-shape {
width: 150px;
height: 100px;
background-color: #ffc107;
border-radius: 50px / 20px; /* 水平半径50px，垂直半径20px */
}这会创建一个边角是椭圆弧线的矩形。如果你想让每个角的椭圆形状都不一样，那就可以在四个值后面再用斜杠接四个值：
.complex-ellipse {
width: 200px;
height: 150px;
background-color: #28a745;
border-radius: 30px 60px 90px 10px / 10px 90px 60px 30px;
/*
左上: 水平30px, 垂直10px
右上: 水平60px, 垂直90px
右下: 水平90px, 垂直60px
左下: 水平10px, 垂直30px
*/
}这种写法虽然看起来有点复杂，但它赋予了我们极大的造型自由度。比如，制作一个像水滴或者特殊对话气泡的形状，它就显得特别有用。有时候我会想，这不就是用最简单的几何元素，去模拟自然界中那些不规则的美感吗？
在实际项目中，border-radius
可能遇到哪些兼容性或视觉上的挑战？
尽管
border-radius现在已经是CSS的“老朋友”了，主流浏览器对其支持得非常好，但在实际项目中，它偶尔还是会给我们带来一些小“惊喜”或者说是挑战。这倒不是说它不好用，而是我们在使用时需要更细心。
一个比较常见的视觉挑战是与
overflow: hidden的结合。当一个带有圆角的容器内部有内容溢出时，
overflow: hidden会裁剪掉溢出的部分。这通常是期望的行为，但如果内部的图片或元素本身没有正确地适应圆角容器，可能会出现一些锯齿或者边缘不平滑的问题，尤其是在高分辨率显示器上或者进行缩放时。我之前就遇到过，一个图片放在圆角容器里，边缘总觉得不够“圆润”，后来发现是图片本身的尺寸和
object-fit属性没有处理好。
另一个不那么常见但值得注意的问题是，当
border-radius与
border属性结合时，如果边框样式很复杂（比如
dotted或
dashed），在某些浏览器或特定缩放级别下，圆角的连接处可能会显得不够完美，出现轻微的断裂感。这通常是渲染引擎对矢量路径和像素栅格化处理的细微差异造成的。虽然不常发生，但如果你的设计对像素级完美度有极高要求，就需要多测试。
再有就是性能方面，对于大多数简单的圆角，性能几乎可以忽略不计。但如果你在一个页面上大量使用了非常复杂的、带有多个不同半径值的椭圆圆角，并且这些元素还在进行动画，理论上可能会对渲染性能造成轻微影响。不过，现代浏览器的优化已经做得相当出色，这种极端情况并不常见，更多的是一种理论上的考量。
最后，
outline属性与
border-radius的交互也是个小坑。
outline是绘制在元素边框之外的轮廓，它不会遵循
border-radius的圆角路径。这意味着，即使你的元素有漂亮的圆角，当它获得焦点时，默认的
outline仍然会显示为矩形。为了视觉一致性，通常需要手动将
outline设置为
none，然后用
box-shadow或伪元素来模拟一个遵循圆角的焦点状态。这虽然不是
border-radius本身的问题，但却是使用它时需要注意的一个设计细节。
除了基本圆角，border-radius
还能与哪些CSS属性结合创造更丰富的视觉效果？
border-radius的魅力远不止于让盒子变圆。它与其他CSS属性结合起来，能创造出各种令人眼前一亮的视觉效果。在我看来，这就像是给一个基础的几何形状赋予了生命，让它能与其他元素“对话”。
最经典的组合之一就是与box-shadow
。当你给一个有圆角的元素添加阴影时，
box-shadow会非常智能地跟随
border-radius的路径，投射出同样圆润的阴影。这让整个元素看起来更有立体感，仿佛浮在页面之上。
.card {
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影也呈现圆角 */
padding: 20px;
background-color: white;
}另一个强大的搭档是background-image
和background-clip
。当你给一个带有圆角的元素设置背景图片时，
border-radius会像一个模具一样，裁剪掉背景图片超出圆角的部分。而
background-clip: padding-box;或
background-clip: content-box;可以进一步控制背景图片是延伸到边框内侧还是内容区域。这在制作带有圆角边框的图片容器时特别有用，能确保图片完美地适应圆角。
transition
和animation
是让
border-radius“动起来”的关键。你可以平滑地改变
border-radius的值，从而实现按钮点击时的圆角变化、卡片展开时的柔和过渡，甚至是元素形状的动态变形。
.animated-button {
border-radius: 5px;
transition: border-radius 0.3s ease-in-out;
/* 其他样式 */
}
.animated-button:hover {
border-radius: 20px; /* 鼠标悬停时圆角平滑过渡 */
}这能极大地提升用户交互的趣味性和视觉反馈。我个人觉得，一个好的动效，往往能让用户对产品产生更深的好感。
虽然
clip-path可以创建更复杂的自定义形状，但
border-radius依然可以作为其补充，或者在不需要极度复杂形状时作为更简洁的替代方案。有时候，我甚至会先用
border-radius打个草稿，再考虑
clip-path。
此外，与transform
属性结合，比如旋转（
rotate）或缩放（
scale）一个带有圆角的元素，也能产生独特的视觉效果。圆角在旋转或缩放后依然保持其形状特性，这对于创建动态的UI组件或艺术性的布局非常有利。比如，一个圆角卡片在鼠标悬停时轻微旋转并放大，就能带来很棒的视觉体验。
