圆角生成器
圆角生成器（border-radius 生成器），是指在线可视化调节元素四个角的水平与垂直圆角半径，实时预览并一键复制 CSS border-radius 代码的前端工具。它免费、无需注册，支持四角独立调节、椭圆异形圆角、百分比与 px 混用、blob 不规则形状与粘贴代码反解析。预览区直接渲染最终 border-radius，所见即所得，不做二次转换。圆角参数全在浏览器本地计算，内容不上传。
按当前 220×140 的预览盒，左上角实际生效约 12×12px，没有触发溢出缩放。 这是按当前预览尺寸的估算值，你项目里元素尺寸不同，结果也会不同。
切换单位时只换单位、不换算数值：border-radius 百分比按边框盒解析， 换算出来的等效值只在当前预览尺寸下成立，元素一改尺寸就不对了。 右边的「≈ N px」就是按当前预览盒现算的参考值，圆角 rem 换算同理。
当前 blob 种子：deer-blob-1。有机形状生成器的约束是「每条边的两个半径正好凑满 100%」， 所以形状永远不会被溢出缩放压扁；同一个种子永远得到同一个形状。预设库更新于 2026-08。
border-radius: 12px;
当前四角同值，最接近的官方 Tailwind 圆角类名是 rounded-xl（12px），不想写任意值可以直接用它。
🔒 圆角参数的生成与解析全部在你的浏览器本地完成，内容不上传、不外发。预览区直接渲染最终 border-radius，和你复制走的是同一串代码。
如何使用圆角生成器
拖动滑杆调四个角的圆角半径，按需把单位切成 px 或百分比；关掉「四角联动」就能给四个角不同圆角，只调一个角就是单个角圆角。
打开「水平 / 垂直半径分离」做椭圆异形圆角，或者直接点胶囊按钮、圆形头像、blob 不规则形状这些预设，再按「换一个 blob」摇一个新形状。
在底部切换简写、四角长写、Tailwind、仅值片段四种导出格式，点「复制代码」把生成的 CSS 圆角代码粘进你的项目。
关于圆角生成器的常见问题
- 圆角生成器会上传数据吗？安全吗？
- 不会上传。圆角生成器的参数调节、代码生成与粘贴反解析全部在你的浏览器本地完成，四个角的半径数值不会发送到服务器，预览区用的就是生成的同一串 CSS，关闭页面即清除。（站点自身仅有匿名访问量统计，与你调的圆角参数无关。）
- 手机上能用圆角生成器吗？需要装软件吗？
- 可以，且不用下载任何 App 或插件。圆角生成器是纯网页实现，手机、平板、电脑浏览器打开即用，滑杆与单位下拉都是原生控件。数值输入框保留了草稿态，手机上逐字符重输不会被吃掉字符。窄屏默认关掉预览区的拖拽手柄，免得和页面滚动抢手势，改用滑杆一样能精确调。
- border-radius 四个值分别对应哪个角？
- 顺序是从左上角开始顺时针：左上、右上、右下、左下。写少于四个值时按对角补齐：写一个是四角同值；写两个时第一个给左上和右下、第二个给右上和左下；写三个时第二个值会补给左下。所以四个角不同圆角必须写满四个值，本工具关掉四角联动后会自动折叠成最短的合法写法。
- 怎么用 border-radius 只给一个角加圆角？
- 两种写法都行。一是用简写把其余三个角写成 0，例如左上角加圆角就是 border-radius: 16px 0 0 0；二是直接用按角长写属性 border-top-left-radius。本工具关掉「四角联动」后调一个角就是单个角圆角，切到「四角长写」标签还能拿到四条按角声明，复制哪条都行。
- border-radius 里的斜杠 / 是什么意思？
- border-radius 斜杠前后的两组值分别是水平半径和垂直半径：前面一组按四个角给水平方向的半径，后面一组按四个角给垂直方向的半径。两者不等时圆角就是椭圆弧而不是正圆弧，也就是椭圆圆角。不写斜杠时浏览器按规范让垂直半径等于水平半径。注意按角长写用空格分隔两个值，没有斜杠。
- border-radius 设成 50% 为什么不是正圆？
- 因为百分比是按两条轴分别解析的：水平半径按边框盒的宽度算，垂直半径按高度算。盒子不是正方形时这两个数就不相等，圆角 50% 不是正圆而是椭圆。想要正圆要么把元素做成正方形（宽高相等再写 50%），要么用像素值把水平和垂直半径写成同一个数。本页默认预览盒是长方形，正是为了让这件事一眼可见。
- 为什么 border-radius 调很大圆角还是不够圆？
- 因为触发了 CSS 规范的溢出缩放：同一条边上两个圆角的半径加起来超过边长时，浏览器会算一个系数，把八个半径一起按这个系数缩小。所以半径写再大也只能到边长的一半。更反直觉的是缩放是全局的，一条边超了、没超的那几个角也会跟着变小。本工具会实时算出这个系数和实际生效的半径。
- 图片加了 border-radius 圆角不生效怎么办？
- 图片圆角不生效通常有三种原因：一是圆角加在了外层容器而图片本身是方的，要么给 img 自己加圆角、要么给容器加 overflow: hidden 把溢出部分裁掉；二是图片上还有 border 或 box-shadow 遮住了圆角；三是父级用了 overflow: hidden，圆角被裁掉了。给 img 补一句 display: block 也能消掉底部那条基线缝隙。
- 圆角边框加了 border 后内侧为什么不圆？
- 因为圆角内外半径不是同一个数。你写的 border-radius 是外半径，内侧那条弧的半径由浏览器按规范算出来：内半径等于外半径减去该方向的边框宽度，减到 0 就画成直角。所以边框越粗，圆角边框的内侧看着越方，这不是浏览器画错了。想让内侧也圆，把外半径调到明显大于边框宽度即可。本页预览盒不画边框，实际项目里要按你自己的边框宽度再核对一遍。
- 按钮圆角多少合适？CSS 圆角怎么设置？
- 按钮圆角多少合适没有唯一答案，但有可参照的档位：标签与徽章这类小控件用 4px 上下，按钮和输入框落在 4px 到 12px 之间，卡片与弹窗 12px 到 24px，再大就开始像药丸。CSS 圆角怎么设置的关键其实不在数值本身，而在同一层级用同一档，且嵌套时外层半径等于内层半径加上两者之间的间距，这样内外两圈圆角才同心。本页下方有按控件分档的取值参考表。
- 怎么用 border-radius 做胶囊按钮和圆形头像？
- 胶囊按钮圆角用一个远大于元素高度一半的像素值即可，例如 9999px，浏览器会自动收到刚好半圆；比写 50% 稳，因为 50% 在长方形按钮上会变成椭圆。圆形头像 CSS 写 50% 并把宽高设成相等的正方形，两条一起满足才是正圆。这两个配方在本页预设里点一下就能载入。
- 圆角生成器能生成 blob 不规则形状吗？
- 能。点 blob 预设或「换一个 blob」就会按种子现算一个八值百分比圆角，例如 68% 32% 63% 37% / 62% 61% 39% 38%。约束是让每条边的两个半径正好凑满 100%，这样永远不会触发溢出缩放，形状才是连续光滑的有机曲线，而不是被压扁的怪形。同一个种子永远得到同一个形状，可以复现也可以分享。
- 圆角生成器能导出 Tailwind 圆角类名吗？
- 能。切到「Tailwind」标签就会得到 rounded 圆角类名的任意值形式，值里的空格已按 Tailwind v3.4 的任意值语法转义成下划线。带斜杠的椭圆圆角也能用：斜杠写在中括号里不会被当成透明度修饰符。四角同值时页面还会提示最接近的官方档位类名，本页下方有完整的对照表。
- border-radius 动画怎么过渡才不跳变？
- border-radius 是可插值属性，直接写进 transition 或 keyframes 就能做圆角过渡。出现跳变通常是两个原因：一是同一个角在起止两端用了不同单位，一端 px、一端百分比时浏览器多数情况下没法插值，只能在中途直接切换；二是两端的写法长度不一致，一端是简写一个值、另一端是带斜杠的八个值。把两端统一成同样的单位与同样的四角写法，过渡就连续了。本工具只生成静态圆角值，不生成动画代码。
- 生成的 border-radius 代码要加浏览器前缀吗？
- 基本不需要。border-radius 兼容性早就不是问题：它从 IE9 起就是标准属性，现代主流浏览器全部原生支持，直接用无前缀写法即可，所以本工具不生成任何前缀代码。旧的 -moz- 按角属性名和标准还不一样（例如 -moz-border-radius-topleft），照着写反而更容易误导，需要兼容极旧内核时请自行核对。
border-radius 参数含义速查表
border-radius 怎么写，一句话概括：一到四个长度或百分比按顺时针给四个角，需要椭圆时再用一个斜杠补一组垂直半径。这件事在中文里还有好几种叫法：圆角生成器、CSS 圆角生成器、在线圆角生成工具，说的都是同一件事 —— 把四个角的圆角半径调出来，复制走一段 CSS 圆角代码。圆角矩形 CSS 里并没有专属属性，说的就是给一个矩形元素写 border-radius，不必去找 rounded-rect 之类的东西。英文站点上的 border radius generator、css border radius generator、border radius css 指的也是它，也有人直接搜 css rounded corners；专门摇不规则有机形状的那类叫 fancy border radius。
| 写法 | 含义 | 例子 |
|---|---|---|
| 一个值 | 四个角用同一个圆角半径 | border-radius: 12px |
| 两个值 | 第一个给左上和右下，第二个给右上和左下 | border-radius: 20px 4px |
| 三个值 | 第二个值会补给左下角 | border-radius: 20px 4px 2px |
| 四个值 | 按左上、右上、右下、左下顺时针给满 | border-radius: 1px 2px 3px 4px |
| 带斜杠 | 斜杠前是水平半径组，斜杠后是垂直半径组 | 50% / 25% |
| 按角长写 | 四条独立声明，两个值之间用空格不用斜杠 | border-top-left-radius: 10px 20px |
四个角为什么按左上、右上、右下、左下排
这个顺序和 margin、padding 的「上右下左」不是一回事，别按肌肉记忆写。圆角是从左上角起顺时针数的，缺省的值按对角补齐：写两个值时，没写的右下角跟左上角一样、左下角跟右上角一样。所以四个角不同圆角要写四个值，一个都不能省；反过来，如果你只想做单个角圆角，其余三个角写 0 或者干脆用按角长写属性会更清楚。
| 写了几个值 | 左上 / 右上 | 右下 / 左下 |
|---|---|---|
| 1 个 a | a / a | a / a |
| 2 个 a b | a / b | a / b |
| 3 个 a b c | a / b | c / b |
| 4 个 a b c d | a / b | c / d |
斜杠 / 前后：水平半径与垂直半径
border-radius 斜杠前后的两组值互相独立：前面一组是四个角的水平半径，后面一组是四个角的垂直半径，两组各自按上面的一到四值规则展开，token 数还可以不一样。两组逐位相等时才可以省掉整个斜杠部分 —— 注意判据是逐位相等，不是「后面那组内部四个值彼此相等」。当两组不等，圆角画出来就是椭圆弧，也就是椭圆圆角。
border-radius 百分比按边框盒解析，而且是分两条轴来的：水平半径按盒子宽度、垂直半径按盒子高度。这就是为什么圆角 50% 不是正圆 —— 在一个长方形盒子上，两条轴算出来的像素数根本不相等，结果自然是椭圆。想要正圆，要么把元素做成正方形，要么改用像素值。另外单位是可以混着写的，例如水平用 px、垂直用百分比完全合法；圆角 rem 换算则要看根字号，16px 根字号下 0.75rem 就是 12px。
圆角超出盒子时浏览器会按比例缩小
这是绝大多数在线圆角工具都不讲、但一定会撞上的一条规范。CSS 的重叠曲线规则说：如果某条边上两个圆角在该方向上的半径之和超过了这条边的长度，浏览器就算一个统一系数，把八个半径一起乘上它。四条边各算一个比值，取其中最小的那个，且只会收小不会放大。
| 边 | 参与判定的两个半径 | 比值 |
|---|---|---|
| 上边 | 左上与右上的水平半径 | 盒宽 ÷ 两者之和 |
| 右边 | 右上与右下的垂直半径 | 盒高 ÷ 两者之和 |
| 下边 | 右下与左下的水平半径 | 盒宽 ÷ 两者之和 |
| 左边 | 左下与左上的垂直半径 | 盒高 ÷ 两者之和 |
胶囊按钮、圆形头像与 blob 不规则形状
常见形状其实都是四角圆角的特例。胶囊按钮圆角用 9999px 这种远大于半个高度的值最稳，浏览器会靠上面那条缩放规则自动收到刚好半圆；写 50% 反而会在长方形按钮上拉成椭圆。圆形头像 CSS 写 50%，但必须同时把宽高设成相等，否则同样是椭圆。至于 blob 不规则形状，本页的有机形状生成器按固定种子现算，同一个种子永远得到同一个形状。
| 形状 | border-radius 值 | 要点 |
|---|---|---|
胶囊按钮 | 9999px | 值远大于半个高度即可，比 50% 稳 |
圆形头像 | 50% | 必须同时把宽高设成相等 |
对话气泡 | 18px 18px 18px 2px | 三个角大圆角，指向说话人的那角留小值 |
票据标签 | 4px 24px 24px 4px | 一侧接近直角、一侧大圆角 |
叶子 | 0 50% | 对角一组 0、一组 50% |
椭圆异形 | 50% / 25% | 斜杠两组不等，圆角是椭圆弧 |
blob 有机形状 | 68% 32% 63% 37% / 62% 61% 39% 38% | 每条边两个半径正好凑满 100% |
blob 的那条约束才是关键：把四条边各自的两个百分比半径凑成正好 100%，就永远不会触发上一节的溢出缩放，曲线才是连续光滑的。随便摇八个数字做不出这个效果，摇出来的形状会被系统性压扁。顺带说明本工具不做的事：border-radius 的圆角是椭圆弧，和 iOS 那种连续曲率的超椭圆（squircle）不是一回事，硬凑只能得到形似神不似的结果，所以这里不提供 squircle 近似。
按钮圆角多少合适：常见控件取值参考
按钮圆角多少合适，先看元素高度：半径超过高度的一半就已经是胶囊，再大也不会更圆（上一节的缩放规则会把它收住）。所以取值只在 0 到半个高度之间挑档。至于 CSS 圆角怎么设置，更要紧的是一致性：同一层级的控件用同一档，比单个控件用了什么数值影响更大。下表是本页基础预设对应的三档常用取值，点上方的预设按钮就能直接载入再微调。
| 控件 | 常用档位 | 理由 |
|---|---|---|
| 标签、徽章与小图标 | 4px | 只去掉扎眼的直角，视觉上仍是方块，不抢内容 |
| 按钮、输入框与下拉框 | 4px ~ 12px | 同一个表单里所有控件用同一档，混档最容易显得没做设计 |
| 卡片、弹窗与图片容器 | 12px ~ 24px | 面积越大越吃得住圆角，小控件照搬这一档会显得肿 |
| 头像与胶囊按钮 | 9999px | 直接走上一节的配方，不参与分档 |
图片圆角不生效：overflow 与子元素裁剪
| 现象 | 原因 | 解决 |
|---|---|---|
| 容器有圆角但图片还是方的 | 圆角只加在了父元素上，子元素不会自动跟着裁 | 给 img 自己加圆角，或给容器加 overflow: hidden |
| 圆角被裁掉一块 | 祖先元素写了 overflow: hidden 且自己没有圆角 | 把圆角与 overflow 放在同一层元素上 |
| 圆角处露出直角的边或背景 | border 或 background 画在了圆角之外的一层 | 把背景和边框挪到同一个有圆角的元素上 |
| 图片底部有一条缝 | img 默认是行内元素，底部留了基线间隙 | 给 img 补一句 display: block |
| 表格单元格圆角无效 | border-collapse: collapse 会合并边框 | 改用 border-collapse: separate |
圆角边框、阴影与 outline 怎么跟着圆角走
元素上写了 border-radius，同一个元素的背景、边框、阴影会自动跟着圆角走，只有 outline 和子元素要额外留意。最常被问的是圆角边框：加了 border 之后，你写的值是外半径，内侧那条弧的半径由浏览器按规范算出来 ——内半径等于外半径减去该方向的边框宽度，减到 0 就画成直角。这就是圆角内外半径的差，也是「边框内侧看着不圆」的成因，边框越粗越明显。
| 一起用的东西 | 跟不跟随圆角 | 要留意的 |
|---|---|---|
| background | 跟随，背景在圆角处被裁 | 改了 background-clip 时裁切边界跟着变 |
| border | 跟随，内半径 = 外半径 − 边框宽度 | 粗边框会把内侧压成直角 |
| box-shadow | 跟随，外阴影沿圆角轮廓外扩 | 阴影自己没有独立的圆角属性，只能靠元素的 |
| outline 圆角 | 较新的浏览器才跟随 | 自 Chrome 94、Firefox 88 起跟随，更早的版本画成直角 |
| 子元素 / 图片 | 不跟随，得自己加圆角或裁 | 给子元素加同样的圆角，或给容器加 overflow: hidden |
另一件常问的事是 border-radius 动画：它是可插值属性，写进 transition 或 keyframes 就能做圆角过渡；两端单位不一致（一端 px、一端百分比）或写法长度不一致时无法插值，动画会在中途直接跳一下。本工具只产出静态值，动画代码要自己写。
Tailwind 圆角类名对照表：官方默认档位
下表数值取自 Tailwind CSS v3.4 的默认主题，由本站的预设数据表现算渲染。像素一列按官方口径 1rem = 16px 换算，项目改过根字号时实际像素会跟着变。需要档位以外的值就用任意值形式的 rounded 圆角类名，本工具的 Tailwind 标签直接给出可粘贴的写法。
| 类名 | 主题值 | 等价像素 |
|---|---|---|
rounded-none | 0px | 0px |
rounded-sm | 0.125rem | 2px |
rounded | 0.25rem | 4px |
rounded-md | 0.375rem | 6px |
rounded-lg | 0.5rem | 8px |
rounded-xl | 0.75rem | 12px |
rounded-2xl | 1rem | 16px |
rounded-3xl | 1.5rem | 24px |
rounded-full | 9999px | 9999px |
Tailwind v4 重命名过整条圆角档位，同一个 tailwind 圆角类名在两个大版本里对应的值并不相同，所以这张表带着版本号看才有意义。本工具的类名输出遵循标注版本的任意值语法，其他版本请自行核对。