CSS 圆角（border-radius）生成器
生成 CSS border-radius，支持独立设置四角、椭圆的 X/Y 半径、px 或 % 单位和不规则圆预设，输出最短的有效简写。
预设
四角
左上
右上
右下
左下
预览设置
预览
CSS 代码
border-radius: 16px;
相关工具
查看全部什么是 圆角生成器？
分别设置每个角的半径，还可为椭圆角设置不同的水平和垂直半径，单位可选 px 或 %。工具会预览形状，并写出最短的等效 border-radius 简写。
如何使用 圆角生成器
- 选择预设（圆角、胶囊、圆形、不规则圆、叶形、票券），或自己设置数值。
- 选择“单位”（px 或 %），如需分别设置 X/Y 半径，请启用“椭圆角（X/Y 分开设置）”。
- 调整每个角（左上、右上、右下、左下）；勾选“四角联动”可同时修改。
- 在“预览设置”中更改宽度、高度和颜色，查看你所需尺寸下的形状。
- 复制 CSS 代码。
示例
输入
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
输出
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
何时使用 圆角生成器
适合用纯 CSS 制作圆角卡片、胶囊、头像和有机的不规则圆形。百分比会随元素缩放（正方形上的 50% 是圆形）。对于任意多边形或带直线切口的形状，请使用裁剪路径生成器；对于有许多控制点的复杂有机形状，请使用 SVG 色块生成器。
圆角生成器 的工作原理
各角按 CSS 要求的顺序排列：左上、右上、右下、左下。每组四个值按标准简写规则缩短：第四个值与第二个相等时省略，第三个与第一个相等时省略，第二个与第一个相等时省略。启用椭圆角时，垂直半径放在斜杠之后（h / v）；当每个垂直半径都等于其水平半径时，省略斜杠部分。
常见用例
- 胶囊形的按钮和标签
- 圆形头像
- 用 8 个值的椭圆半径制作有机的不规则图片
- 票券或叶形卡片
- 不对称的对话气泡圆角
常见问题
border-radius 中的斜杠是什么意思？
斜杠之前的值是水平半径，之后的值是垂直半径，它们会产生椭圆角。
为什么 999px 会得到胶囊形？
当半径大于盒子时，浏览器会把所有半径按比例缩小，所以一个很大的值总能得到完美的圆端。
应该用 px 还是 %？
px 在任何尺寸下都保持相同的曲线；% 相对于元素的宽度（水平）和高度（垂直），这正是做圆形和不规则圆时需要的。