CSS 圆角生成器

三步创建圆角形状

1. 将盒子宽度和高度设为 1 到 2000 CSS 像素。以 px 或 % 输入各角的水平和垂直半径，或将左上角的一对数值应用到所有角。
2. 查看适应后的预览。水平百分比以宽度为基准，垂直百分比以高度为基准；切换单位会保留数字，但改变其含义。
3. 选择仅圆角或盒子 CSS，并复制完整结果。如果无法复制，请选择只读文本。字段无效时不会显示当前 CSS 结果。

理解每个角的两个半径

每个角都有水平和垂直半径。border-radius 中的斜杠分隔四个水平值和四个垂直值，两组均按左上、右上、右下、左下排列。

水平百分比使用宽度，垂直百分比使用高度。矩形盒子两个方向均为 50% 时得到椭圆，不一定是圆。任一分量为零时该角为直角。

相邻半径在边上重叠时，浏览器用同一个系数缩小全部八个分量。解析值和使用值说明当前预览盒子的像素；这些四舍五入的数值不会替代原始 CSS。

预览先按声明尺寸布局盒子，再整体缩放以适应空间。仅复制圆角时，在不同尺寸的盒子上效果可能不同。盒子 CSS 还包含尺寸、border-box、零边框和零内边距，但不包含预览颜色。

混合单位示例

在 240 × 120 的盒子中，水平值为 75%、120px、20%、30px，垂直值为 40px、60%、60px、50% 时，共同系数为 0.8。上方水平半径变为 144px 和 96px，其余分量也会缩小。

保留这些值并将盒子改为 120 × 240，限制系数变为 4/7。形状改变，但百分比不会被改写成固定像素。

240 × 120 盒子的水平和垂直半径均为 50% 时，使用值分别为 120px 和 60px。所有半径为零时，各角为直角。

范围与解释

数字编辑器支持非负半径，最大 4000px 或 1000%，最多三位小数。它不解析任意 CSS、calc()、var()、逻辑角或其他单位。

使用一个小数点或逗号，不使用千位分隔符。切换单位保留数字，而不是解析后的长度。空白、不完整或无效字段会移除当前预览和复制结果。

使用像素和系数是针对当前盒子的四舍五入说明。原生渲染可能进行亚像素舍入；复制的 CSS 保留规范化后的原始数值与单位。

适应缩放只影响预览显示，不改变逻辑盒子或导出的规则。在其他盒子上，浏览器会重新计算百分比和重叠缩放。

圆角会改变背景或边框形状，但并不总是裁剪子元素。本工具不提供图片上传、拖动、动画或 overflow 规则。

本地样式，不保存草稿

本工具不添加上传、保存历史、包含设置的链接或请求。只有主动操作才会复制。现有网站服务、浏览器扩展及自行保留的副本不在任何普遍删除承诺内。