圆角生成器
UpBox优盒工具箱，免费在线圆角生成器：四个角分别设半径，像素与百分比可切换，实时预览并输出压缩后的 border-radius 简写。
无需注册 · 数据不上传No sign-up · nothing uploaded
四角半径Corners
四角一致
百分比单位按元素自身宽高计算，同一个值在长方块上会变成椭圆角；要做「胶囊按钮」直接把四个角设成 999px 或 50%
预览与代码Preview
border-radius: 14px;
输出的简写会自动压缩：四角相同只写一个值，上下相同、左右相同写两个值；想写成四个角各自的值，把任意两角调成不同即可
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
做一个卡片要试几版圆角，改一个值就得回编辑器刷新看效果；四个角不一样时还要记住简写的书写顺序。 Tuning a card corner takes several rounds through the editor, and uneven corners mean remembering the shorthand order.
这里四个角分别调，像素和百分比随手切，预览与代码同步变，看准了直接复制。 Set each corner here, switch between pixels and percent, and the preview and CSS update together until you copy it.
- 四角独立Per-corner
- 双单位切换Two units
- 实时预览Live preview
- 简写压缩Shorthand
使用说明
- 调四个角。Set the corners.
- 选单位。Pick a unit.
- 勾联动批量改。Or link them.
- 复制 CSS。Copy the CSS.
常见问题
为什么百分比会变成椭圆角？Why do percentages turn oval?
百分比按元素宽高分别计算，横向半径按宽度、纵向按高度，宽高不等时自然成椭圆。Percentages resolve against width and height separately, so unequal sides make elliptical corners.
四个值的顺序是什么？What is the order of four values?
左上、右上、右下、左下，顺时针一圈，和 border-radius 的原生语法一致。Top left, top right, bottom right, bottom left, clockwise, matching native border-radius.
要做胶囊按钮怎么写？How do I get a pill shape?
设成 999px 或 50%，两种写法在矩形元素上都四边全圆。Set 999px or 50%; both fully round a rectangular element.
能直接用在 Tailwind 里吗？Does this work in Tailwind?
不能原样粘，Tailwind 的 rounded 类只覆盖预设值，非预设半径要用任意值语法。Not verbatim; Tailwind rounded classes cover presets only, so custom radii need arbitrary values.