如何在CSS中设置元素圆角半径_border-radius不同角独立控制

border-radius 可统一或独立设置四个圆角，支持1到4个值的简写语法，分别对应不同角的半径，也可使用具体方向属性精确控制，如 border-top-left-radius；还支持斜杠分隔的x/y轴半径，实现椭圆圆角效果。

在CSS中，border-radius 属性不仅可以统一设置元素的圆角，还支持对四个角进行独立控制。通过合理使用该属性的语法，你可以为左上、右上、右下、左下每个角分别设置不同的圆角半径。

理解 border-radius 的简写语法

border-radius 实际上是四个方向属性的简写：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
使用简写时，可以传入1到4个值，表示不同角的半径：

一个值：四个角相同

两个值：第一个为左上与右下，第二个为右上与左下

三个值：第一个为左上，第二个为右上与左下，第三个为右下

四个值：按顺时针顺序 — 左上、右上、右下、左下

例如：

border-radius: 10px; — 所有角都是 10px

border-radius: 10px 20px; — 左上和右下为 10px，右上和左下为 20px

border-radius: 10px 20px 30px; — 左上=10px，右上和左下=20px，右下=30px

border-radius: 10px 20px 30px 40px; — 分别对应左上、右上、右下、左下

单独控制每个角的圆角

如果不想用简写，也可以直接使用具体的方向属性精确控制每个角：

border-top-left-radius: 15px;

border-top-right-radius: 10px;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 0;

这种方式更清晰，适合需要精细调整布局的场景。

设置椭圆圆角（x/y 轴半径）

border-radius 还支持设置水平和垂直两个方向的半径，实现椭圆形圆角。语法使用斜杠 / 分隔：

border-radius: 10px / 5px; — 水平半径10px，垂直半径5px

border-top-left-radius: 20px 10px; — 第一个值是水平半径，第二个是垂直半径

这种写法常用于设计特殊形状的卡片或按钮。

基本上就这些。掌握这些技巧后，你可以灵活控制任何元素的圆角效果，满足多样化的设计需求。