绝大多数人对 border-radius 的认知停留在”写一个数字”。实际它是 CSS 表达力最强的属性之一——一条声明里有八个独立参数，能造出从胶囊、椭圆到不规则有机斑块的各种形状。
简写到全写
border-radius 是四个角各自一个 x / y 半径，共八个值的简写：
/* 一个值：四角相同 */
border-radius: 12px;
/* 两个值：左上+右下 / 右上+左下 */
border-radius: 12px 24px;
/* 四个值：左上 / 右上 / 右下 / 左下（顺时针） */
border-radius: 12px 24px 8px 16px;
/* 八个值：斜杠分隔 x/y，每边四个角 */
border-radius: 12px 24px 8px 16px / 6px 12px 4px 8px;第八值形态可以做”非对称椭圆角”——比如葵花瓣、不规则斑块：
.blob {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}把上面四个百分比和下面四个百分比错开，就是网上常见的”liquid blob”造型。
椭圆角
斜杠语法是关键：
/* 标准圆角：x = y */
border-radius: 16px;
/* 椭圆角：水平 50px，垂直 20px —— 像橄榄形 */
border-radius: 50px / 20px;椭圆角在做”卡片顶部内凹”或”标签页底”等异形容器时很有用，没有椭圆角必须用 SVG。
胶囊与椭圆的区别
.pill { border-radius: 999px; } /* 自动胶囊 */
.oval { border-radius: 50%; } /* 椭圆 */CSS 标准规定 border-radius 不能超过元素短边的一半——超过就被 clip 住。所以 999px 在任何元素上都会变成”短边一半”，即胶囊形：
| 元素尺寸 | 999px 实际半径 | 形状 |
|---|---|---|
| 200×40 | 20 | 胶囊 |
| 100×100 | 50 | 圆 |
| 60×40 | 20 | 胶囊 |
而 50% 是动态百分比：
| 元素尺寸 | 50% 实际半径 | 形状 |
|---|---|---|
| 200×40 | 100×20 | 椭圆 |
| 100×100 | 50×50 | 圆 |
按钮 / Tag 用 999px，头像 / 圆点用 50%，不要混。
iOS 超椭圆 vs CSS 圆角
把同样 border-radius: 24px 的 CSS 矩形和 iOS App 图标摆一起，能立刻看出后者更”软”。
数学原因：
- CSS 圆角：四分之一圆弧，方程 x² + y² = r²
- 超椭圆 (squircle)：|x|ⁿ + |y|ⁿ = rⁿ，n ≈ 4-5
n = 2 时，直边和弧的连接处曲率突变——从直线（曲率 0）瞬间变成圆（曲率 1/r），用 G2 连续性术语就是”只 G1 不 G2”。
n = 5 时，弧的两端曲率渐变接近 0，与直边光滑衔接。Apple iOS 7+ 全系图标、所有原生控件圆角都是 squircle，肉眼看着”边角更厚”。
差异在小圆角（≤ 12px）几乎看不见，但大圆角和大图标上一目了然。
近似 squircle 的三条路径
1. clip-path + SVG path
最准确，但失去 border 和 box-shadow：
.squircle {
width: 120px; height: 120px;
background: linear-gradient(135deg, #6c63ff, #48c8ff);
clip-path: path('M 60 0 C 100 0, 120 20, 120 60 S 100 120, 60 120 S 0 100, 0 60 S 20 0, 60 0 Z');
}需要按尺寸生成 path——参数化时用 figma-squircle 之类的库算 SVG 路径。
2. CSS corner-shape（Webkit 实验性）
Safari 18 起支持非标准属性 corner-shape：
.squircle {
border-radius: 24px;
corner-shape: scoop; /* 内凹 */
/* 或 */
corner-shape: notch;
corner-shape: bevel;
/* squircle 风格在草案里叫 superellipse，2026 仍未稳定 */
}到 2026 年只有 Safari 部分支持，Chromium / Firefox 还在 issue 阶段。能用就当增强，不要依赖。
3. mask 一张 SVG squircle
.squircle {
mask: url('data:image/svg+xml;utf8,<svg ...><path d="M..."/></svg>') no-repeat center / 100% 100%;
}兼容性好但失去阴影。
结论：UI 圆角 ≤ 12px 用 border-radius 即可，差异不可见；图标 / 大卡片要 squircle 上 SVG / Figma 切图，别折腾 CSS。
border-radius 与 overflow
子元素超出父级圆角范围时，必须 overflow: hidden：
.card {
border-radius: 16px;
overflow: hidden; /* 否则子图片会溢出圆角 */
}但 overflow: hidden 会裁掉 box-shadow 的外延——卡片如果想要外阴影，不能在卡片本身设 overflow，得把内容包一层：
<div class="card"> <!-- shadow 在这里 -->
<div class="card-inner"> <!-- overflow 在这里 -->
<img src="...">
</div>
</div>.card { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.card-inner { border-radius: inherit; overflow: hidden; }border-radius: inherit 是常用技巧——内层不用重写圆角值。
性能
border-radius 本身零成本。但与下列组合时浏览器会创建额外合成层：
border-radius+overflow: hidden+ 滚动子元素：iOS Safari 上有概率掉帧border-radius大半径 + 大尺寸 + 反复 hover 改 radius：每帧重计算几何
需要动画 radius 时，用 clip-path 替代往往更平滑：
/* 动画 border-radius —— 卡 */
.box { transition: border-radius .3s; }
/* 动画 clip-path —— 顺滑 */
.box { transition: clip-path .3s; clip-path: inset(0 round 16px); }
.box:hover { clip-path: inset(0 round 32px); }一句话总结
border-radius 写一个数字浪费了它七个参数；要软角看尺寸——12px 以下不用纠结，24px 以上 CSS 圆角永远不如 squircle。