使用方法
CSS圆角生成器把四个角的半径直接拼成可用的 CSS，只要四步：
- 「左上角半径」「右上角半径」「右下角半径」「左下角半径」分别填 16 像素。想四角一样，直接在「统一半径」填 16 再点「应用到四角」。
- 点「生成 CSS 代码」，或在任一输入框按 Enter（生成器也支持 Enter 触发）。右侧方块会按你写的值实时变圆。
- 代码进下方文本框：四角相同显示
border-radius: 16px;，不同角显示四值写法。 - 点「复制代码」整段拿走粘进样式表；想还原演示值按「载入示例」。
CSS圆角生成器能解决什么
它把「我想要个圆角按钮/卡片」变成一行可粘贴的代码，适合三类场景：
- 卡片和按钮：四角统一 8～16 像素是现在最通用的卡片圆角，演示 16px 出来的方块就是柔和圆角，不用再翻文档记语法。
- 异形标签：胶囊标签只要把四角设成高度的一半（如 24 像素高就填 12），或只圆左右两角做「一侧尖一侧圆」的书签效果。
- 斜角与椭圆角：左上右下大、右上左小，能拼出不对称圆角；四角都很大时方块趋近椭圆，预览区一眼能看到差异。
本页不做的事：不生成斜杠语法（如 50% / 30% 的椭圆长短轴分别设）；不做带 border-top-left-radius 这种逐角长写；不做动画或 hover 变化。需要更细的控制，把生成的简写改成逐角长写即可。
原理和变量
① 用了哪个具体函数：核心是字符串拼接。取四个角的数值后，按「左上 右上 右下 左下」顺序拼成 border-radius: Apx Bpx Cpx Dpx;；当四值相等时压缩成单值 border-radius: Apx;。没有数学运算，只是格式化输出。
② 关键参数为什么这样取：CSS 的 border-radius 简写顺序固定为「左上→右上→右下→左下」（顺时针从右上起但首个是左上），本页严格按这个顺序填，避免你手写时把右上左下搞反。四角独立是为了支持不对称圆角。
③ 遵循哪个标准：语法来自 CSS Backgrounds and Borders Module Level 3 的 border-radius。单位是像素（px），与绝大多数设计稿一致；输出不带浏览器前缀，现代浏览器原生支持。
④ 输入怎么变成输出：四角都填 16 → 检测到相等 → 输出 border-radius: 16px;。若填「左上 16、右上 8、右下 16、左下 8」→ 输出 border-radius: 16px 8px 16px 8px;，预览区左右上角更尖、左右下角更圆。
⑤ 边界与阈值：每个角限 0～1000 像素；负数、空值、非数字逐项给具体提示后才继续。四角都为 0 是合法直角（输出 border-radius: 0px;）；超过元素短边一半（如 100×100 方块填 60）圆角会吃到对边，浏览器自动裁到不重叠。
⑥ 常见误用的正确解释：半径超过 50% 不会报错，只是变成完整椭圆/圆角（100×100 填 50 即正圆角）；四角顺序写反（把左下当右上）会让不对称角镜像；单位漏写 px 会导致 CSS 无效。这些都不是生成器错，是填法问题。
完整示例（数值仅作演示）
保持演示值：四角都 16 像素。
- 四角相等 → 输出
border-radius: 16px;。 - 预览方块 120×120，四角 16 像素，呈柔和圆角矩形。
- 若改成「左上 40、右上 40、右下 8、左下 8」→ 输出
border-radius: 40px 40px 8px 8px;，是上圆下尖的对话气泡感。 - 若四角都填 60（120 方块的一半）→ 输出
border-radius: 60px;，方块变成完整椭圆。
这四处与页面默认文本框、预览区、对照表第 16 行（半径 16）一致，可三处核对。
输入范围与对照表
CSS圆角生成器的对照表固定四角统一半径，列出 0～16 像素对应的 CSS 片段与视觉效果（120×120 方块）：
| 半径（像素） | CSS 片段 | 视觉效果 |
|---|---|---|
| 0 | border-radius: 0px; | 直角方块 |
| 1 | border-radius: 1px; | 几乎不可见的微圆 |
| 2 | border-radius: 2px; | 极轻圆角 |
| 4 | border-radius: 4px; | 紧凑小圆角 |
| 6 | border-radius: 6px; | 常见小卡片圆角 |
| 8 | border-radius: 8px; | 标准卡片圆角 |
| 10 | border-radius: 10px; | 柔和按钮圆角 |
| 12 | border-radius: 12px; | 明显圆角 |
| 14 | border-radius: 14px; | 圆润卡片 |
| 15 | border-radius: 15px; | 接近半圆过渡 |
| 16（演示值） | border-radius: 16px; | 柔和圆角矩形 |
| 20 | border-radius: 20px; | 大圆角 |
| 24 | border-radius: 24px; | 胶囊感（24 高标签即全圆） |
| 30 | border-radius: 30px; | 强圆角 |
| 40 | border-radius: 40px; | 近椭圆 |
| 50 | border-radius: 50px; | 半圆角（120 方块四角相触） |
| 60 | border-radius: 60px; | 完整椭圆 |
对照表能看出「半径到元素一半（60）就变椭圆」：120 方块填 60 四角圆角相接，再大也不会更圆，浏览器会等比收缩。
结果边界和舍入
输出性质：结果是标准 CSS 文本，单位固定 px，可直接粘进 .class { ... }。四角相等自动压缩成单值写法，更简洁。
什么时候会提示：某角不是 0～1000 的整数、为负、为空或不是数字时，会指出具体是哪个角并拦下，不会生成半截代码。四角都为 0 是合法直角输出，不算错。
预览与代码一致性：预览区用的就是生成的同一段 border-radius 值，所见即所得；若你觉得预览比预期圆/尖，直接调对应角再生成。
结果用途：这是静态样式片段，不含动画、响应式或前缀；老项目若需兼容极旧浏览器，自行补 -webkit- 前缀。
常见问题
四角一样为什么还显示四个值？
不会。生成器检测到四角相等会自动压缩成单值 border-radius: 16px;。只有四角不完全一致时才出现四值写法。
半径填很大也不会报错吗？
不会报错，但有上限：120×120 方块填 60 就变完整椭圆，再大浏览器会等比收缩，不会溢出。上限参数设 1000 是防手滑填天文数字。
顺序是不是左上右上右下左下？
是。CSS 简写顺序固定为「左上→右上→右下→左下」，本页严格按此填，避免手写把左下右上搞反导致不对称角镜像。
能生成椭圆（长短轴不同）吗？
本页用单值四角，出的是对称圆角。要长短轴不同的椭圆需用斜杠语法（如 50% / 30%），可生成后手动改成 border-radius: 50% / 30%;。
单位只能是 px 吗？
本页固定输出 px，和多数设计稿一致。需要 rem、% 或 em 的话，把生成的 px 数值替换成对应单位即可，顺序规则不变。
胶囊标签怎么设？
让圆角等于元素高度的一半。例如 24 像素高的标签填 12，或四角都填高度一半，左右两侧就成半圆，即胶囊形。
预览和真实页面不一样？
预览是 120×120 方块，真实元素尺寸不同，圆角观感会随元素大小变化（同一 16px 在大卡片上更不明显）。以你实际元素的尺寸判断。
我的输入会被保存或上传吗？
不会。全部在浏览器内拼接与预览，刷新即清空；生成时代码不会发任何网络请求。
相关工具
- 昵称生成器：给圆角组件起一个产品昵称。
- 虚拟EAN条码生成器：需要圆角边框包裹条码时参考。
- 星球名字生成器：圆角卡片配科幻风命名。
- 指定范围随机数生成器：随机圆角做 A/B 测试时用。
- 书名名字生成器：圆角书封标题灵感。
- 虚拟部门生成器：圆角徽章里的部门名。
- Art工作室名字生成器：圆角作品集站点命名。