border-radius：一行写四个角
border-radius 把上一页那套切图工程压成一行声明：圆角不再是图片资产，而是浏览器在渲染时画出的矢量弧——能继承、能动画、随字号与主题色自由变化。它看似简单，背后却是
8 个半径：四个角各有水平与垂直两个半径。本页拆解它的全部语法：1~4 值的顺时针展开、/ 分写水平垂直造椭圆角、4 个 longhand、百分比基准、半径超界时的等比收缩，以及它如何裁剪
overflow、与 border / box-shadow / outline 协同。
1 · 四角语法：1~4 值如何顺时针展开
border-radius 的 1~4 个值不是 margin / padding 那套「上右下左」，而是四个角，从左上角起顺时针:。默认值对角补齐:1 值四角相同；2 值 =「主对角线 / 副对角线」(TL·BR / TR·BL);3 值 =「TL / 两个副对角 / BR」。每个角其实有水平与垂直两个半径——默认同步（水平=垂直，正圆弧）；把某个角单独切到分开，该角的水平与垂直各自可调，shorthand 用
/ 把它们前后分写（详见下一节）。拖滑块，看 shorthand 如何自动塌缩成最短写法，以及对应的 4 个 longhand。
1.1 · 四个 longhand，以及它们各自的两个半径
| longhand | 管哪个角 | 取值 |
|---|---|---|
| border-top-left-radius | 左上 | 可接 1 或 2 个值：水平 垂直。一个值时水平=垂直（正圆弧） |
| border-top-right-radius | 右上 | 同上 |
| border-bottom-right-radius | 右下 | 同上 |
| border-bottom-left-radius | 左下 | 同上 |
顺序记忆：从左上角开始顺时针转一圈。这与 margin / padding 的「上右下左」不同——它是角不是边。默认补齐规则也不同：border-radius 默认补对角（2 值 = 两条对角线），而 margin 默认补对边。把 TL 与 BR 设成一样、TR 与 BL 设成另一样，会看到 shorthand 塌缩成两个值。
2 · 椭圆角：/ 把水平与垂直半径分开
每个角的弧其实是一段椭圆弧，有独立的水平半径与垂直半径。当两者相等，弧是正圆；不等，就是被拉长的椭圆。在 shorthand 里用 / 分隔：斜杠前是四个角的水平半径，斜杠后是四个角的垂直半径——border-radius: 40px 20px / 20px 40px。拖两个滑块体会椭圆角。
50% 的两个特例。百分比相对border box 的宽 / 高计算。当四角都是 50%：正方形 → 正圆；长方形 → 椭圆（水平半径=宽一半、垂直半径=高一半）。而做胶囊按钮（两端半圆）的稳妥写法是
border-radius: 9999px——一个大到一定被收缩算法压回「半个短边」的长度值，无论盒子多宽都恰好是半圆端，且不像 50% 那样在长方形上变成椭圆。
3 · 半径超界：浏览器如何等比收缩
如果相邻两个角的半径之和超过了它们共享那条边的长度，弧就会重叠、画不出来。规范规定此时浏览器不报错、不裁断，而是为所有半径找一个统一的缩放系数
（且不超过 1），把每个半径都乘以 f。结果：半径整体等比缩小，保持比例不失真。把下面这个盒子的半径推到超过盒子尺寸，看 f 与实际渲染。
为什么是「全部一起缩」而不是「各自夹断」？若每个角单独 clamp，相邻半径不同时会出现突变拐点，弧线不再平滑相接。统一系数 f 保证所有角按同一比例缩小，相邻弧仍能平滑过渡——这也是
9999px 胶囊写法可靠的原因：它一定触发收缩，被压回恰好半个短边。
4 · 裁剪与协同：谁跟着圆角走
圆角只改变盒子的可见轮廓，不改变它在布局里占的方形区域，也不改变命中（点击）区域——角外那块「方角余料」依然可点。要让内容也被圆角裁掉，需 overflow: hidden（或 clip / auto）;background 与
box-shadow 默认就跟随圆角轮廓，而 outline 多数实现跟随但留有间隙。
overflow: visible 下，子内容的方角会「探出」圆角轮廓。这是最常见的圆角失效来源：父级设了 border-radius 却没设 overflow: hidden，里面的图片 / 背景在角上露出直角。但要注意 overflow: hidden 会切断子级的 position: absolute 溢出与 box-shadow 外扩——需要圆角裁剪又要让阴影外溢时，常用额外一层包裹分离这两件事。
4.1 · 圆角与各属性的关系
| 属性 / 行为 | 跟随圆角？ | 要点 |
|---|---|---|
| background | 跟随 | 背景被裁进圆角轮廓（默认 background-clip: border-box） |
| box-shadow | 跟随 | 外阴影 / 内阴影都沿圆角轮廓绘制 |
| border | 跟随 | 边框内外缘各自是一条圆弧；边宽不一时内外半径不同 |
| outline | 多数跟随 | 现代浏览器沿圆角描边，但常留间隙，且不占布局 |
| 子内容 | 默认不裁 | 需 overflow: hidden/clip/auto 才被圆角裁切 |
| 命中 / 布局区域 | 不变 | 仍是方形；角外余料可点击。要改命中形状用 clip-path |
5 · 下一步
border-radius 能画的弧，本质都是圆 / 椭圆。corner-shape 一页展示它如何在同一个半径上换掉曲线类型——把圆弧推广成 squircle、bevel、scoop、notch 的超椭圆家族。