Border Radius 生成器
拖拽角点手柄，用 8 个独立半径雕刻有机 blob 形状——然后复制 CSS 或 Tailwind 代码。
如何使用 Border Radius 生成器
- 直接在预览盒上拖拽 4 个角点手柄，即可直观地塑造形状。
- 用滑杆精细微调：每个角都有独立的水平与垂直半径。
- 试试预设——blob、叶子、蛋形与票券形状一键可得。
- 把演示盒子与背景颜色调成贴近真实设计，预览更准确。
- 在 CSS 标签页复制 border-radius 声明，或获取 Tailwind 类名。
关于本 Border Radius 生成器
大多数人只知道 border-radius 的单一值用法——但该属性其实最多接受 8 个值：四个水平半径与四个垂直半径，用斜杠分隔（例如 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%）。这种斜杠语法正是现代网页设计中无处不在的有机「blob」形状的秘密。
本生成器把全部 8 个值都开放为滑杆与可拖拽的角点手柄，无需背诵语法即可雕刻出想要的形状。当所有角的水平与垂直半径相等时，输出会自动简化为标准的 1–4 值写法。生成的代码适用于所有现代浏览器，Tailwind 标签页会输出任意值 rounded-[...] 类名。
Border Radius 常见问题
border-radius 中的斜杠（/）语法是什么？
在 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% 中，斜杠前是四个角（左上、右上、右下、左下）的水平半径，斜杠后是对应的垂直半径。水平与垂直半径不同就会形成椭圆角——这正是有机 blob 形状的基础。
如何做出正圆？
把四个角都设为 50%（或点击「圆形」预设）。正方形元素使用 border-radius: 50% 会得到正圆；矩形元素则会得到椭圆。百分比是相对于元素自身宽高计算的。
border-radius 应该用百分比还是像素？
百分比随元素缩放，形状具有响应式，非常适合 blob；像素提供固定圆角尺寸，更适合按钮、卡片等需要一致圆角的 UI 组件。本生成器使用百分比，让形状在任何尺寸下都保持比例。
为什么我的 blob 在宽元素上看起来被压扁了？
百分比半径是相对于元素尺寸计算的——宽 400px 盒子的 50% 水平半径是 200px，而高 200px 的 50% 垂直半径只有 100px。这是预期行为：形状会随盒子自适应。以与真实元素相同的宽高比预览即可。
8 值语法在所有浏览器中都能用吗？
可以。椭圆角的斜杠语法属于 CSS Backgrounds and Borders 规范，所有现代浏览器（Chrome、Edge、Firefox、Safari）都支持，无需前缀。