border-radius 圆角完全指南:四角分别设、椭圆角、做圆形和胶囊按钮

很多人对 border-radius 的印象停在"写个 8px 就有圆角"。其实它能做的远不止这点:四个角可以各设各的,每个角还能横向和纵向分开,凑出椭圆角,再往下走就是叶子、柠檬、blob 这种有机异形。这篇把规则讲透,再用圆角生成器把每种形状当场做出来,复制就能用。

四个角的顺序到底怎么排

border-radius 接受 1 到 4 个值,顺序是固定的,从左上角开始顺时针走:左上、右上、右下、左下。

写 1 个值:四个角都一样。border-radius: 12px 等于四个 12px。
写 2 个值:第一个管左上和右下,第二个管右上和左下(对角成对)。
写 4 个值:严格按左上、右上、右下、左下逐个对应。

举个例子,border-radius: 20px 4px 20px 4px 是左上和右下圆、右上和左下接近直角,常用来做那种"对角呼应"的卡片。记不住顺序也没关系,在工具的高级模式里 8 根滑块直接标了左上 H+V、右上 H+V、右下 H+V、左下 H+V,拖一下就知道哪个对应哪个角。

椭圆角:一个角的横向和纵向分开

这是大多数生成器做不到、也是 border-radius 最被低估的能力。完整写法用斜杠分两组:

border-radius: H1 H2 H3 H4 / V1 V2 V3 V4;

斜杠前是四个角的横向半径,斜杠后是四个角的纵向半径。当某个角的 H 不等于 V 时,这个角就不是正圆弧,而是椭圆弧:可以是一道又宽又浅的弯,也可以是一道又窄又深的弧。叶子形、柠檬形、blob 全靠这种 H/V 非对称来实现。如果你只给每个角一个数字(H 永远等于 V),那永远只能得到规则圆角盒子。

做圆形、胶囊和 squircle

几个最常用的形状,记住这几条规则就够:

正圆:元素是正方形时,border-radius: 50% 直接变圆。50% 意味着横纵半径都等于边长的一半,四个角的弧刚好接成整圆。
胶囊按钮:元素是横向长方形时,border-radius: 999px(或任意大于高度一半的值)会把左右两端各自收成半圆,中间保持直,这就是 pill。用百分比写 border-radius: 50% 在长方形上会变成椭圆,所以胶囊一般用一个足够大的像素值。
squircle(圆角方):iOS 图标那种介于圆和方之间的形状,不是单一半径能搞定的,需要 H/V 非对称的连续曲率。工具里直接选 squircle 预设,复制 8 值写法套到 120px 头像上,retina 下角是顺滑的,不像拍一个 24px 圆角那样边缘发生硬。

工具内置了 12 个手工调过的预设:胶囊、卡片、圆角方、芯片、票券、柠檬、叶子、水滴、蛋形、对话框、blob、纯方形,日常要用的形状基本都覆盖了。

一段真实的 blob 输出

我自己最常用的是 blob 模式。它跑一个确定性的随机算法,种子相同就永远产出同一个形状,所以可以把种子号写进代码注释里复现。随手生成一个,工具输出的就是这样一段:

.blob {
  width: 220px;
  height: 220px;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

注意这里横纵两组数字都不一样,这才是"有机"的来源。要做会流动的 blob 背景,就用同一个种子、不同复杂度生成 3 到 4 套配置,各自完整写成 8 值形式塞进 @keyframes,跑 8 秒以上的循环。关键是两段关键帧都得显式写齐 8 个值、用同一单位,否则浏览器没法逐位插值,过渡会跳变。

顺手导出 SVG 蒙版

工具除了复制 CSS,还能复制一段等效的 SVG path,每个角用三次贝塞尔曲线、标准 0.5523 控制点系数近似圆弧。需要把形状塞进 <svg> 当背景、装饰图,或者做成 clip-path 蒙版时就用它,缩放不糊,一个定义在手机和桌面 banner 上都能用。如果你要的是更复杂的多边形或自定义路径蒙版,可以转去 clip-path 生成器接着画,两个工具配合着用很顺。

要提醒一句:SVG path 是近似,适合背景和蒙版;元素自身的边框圆角请用 CSS 输出,浏览器画的 border-radius 是真椭圆弧,精度高于近似路径。

小结

border-radius 的能力分三层:四角分别设是基础,横纵分开的椭圆角是进阶,blob 异形是上限。把顺序和斜杠写法搞清楚之后,剩下的交给圆角生成器实时调、实时预览、一键复制,比在编辑器里盲调数字快得多。

Made by Toolora · Updated 2026-06-13