适用人群
- 设计卡片与按钮的用户
- 学习圆角顺序的开发者
开发者设计工具
Border Radius 生成器
通过实时预览调整卡片、按钮、图片和模态框的 CSS border-radius 值，并生成简写 CSS、单独属性以及 inline style 代码。
单独调整圆角
可分别设置左上、右上、右下和左下圆角值。
实时预览
设置的 radius 值会立即反映到 Preview Card 中。
生成 CSS 代码
可同时查看简写形式、单独属性以及 inline style 示例。
当前单位
px
圆角模式
相同数值
顶部 Radius
24px / 24px
底部 Radius
24px / 24px
Radius 设置
可以为所有圆角使用相同数值，也可以分别调整四个角来创建所需的 UI 样式。
取消勾选后，可以分别设置四个角的圆角值。
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
普通 UI 推荐使用 px，圆形图片或头像推荐使用 %。
Live Preview
Border Radius
Preview Card
设置的圆角值会实时显示在这里。
Top
24px / 24px
Bottom
24px / 24px
Unit
px
推荐预设
快速应用常见的卡片、按钮和图片样式。
基础 UI Radius
按钮 / 图片样式
特殊 / 创意样式
生成结果
可将下方代码用于 CSS 文件、组件样式或 inline style。
请选择设置后点击“生成 CSS 代码”按钮。
按正确的角顺序和单位生成圆角 CSS
联动或分别调整四个角，使用 px、rem 或百分比预览形状。生成统一圆角或四值规则后，可以复制或保存 CSS。
使用场景
- 为卡片四角设置相同半径。
- 只缩小一个角，制作类似对话气泡的形状。
从输入到检查结果
- 1
选择 px、rem 或百分比。
- 2
联动开启时，操作任一角都会同时调整四角。
- 3
关闭联动后分别设置各个角。
- 4
生成 CSS，后续修改会更新输出。
- 5
复制或下载，并在实际组件尺寸下检查。
统一卡片圆角
- 输入
- 四角：16 · 单位：px
- 结果
- border-radius: 16px;
四角相同时，主规则使用一个值。
缩小右下角
- 输入
- 左上24 · 右上24 · 右下4 · 左下24 · px
- 结果
- border-radius: 24px 24px 4px 24px;
四值从左上开始顺时针排列，输出也包含各角的单独声明。
rem 换算
- 输入
- 四个控制值：16 · 单位：rem
- 结果
- border-radius: 1rem;
以 16px 为换算基准。目标页面根字号为 20px 时，1rem 会显示为 20px。
计算与处理原理
四角相同时输出一个值，否则按左上、右上、右下、左下输出四值。px/rem 模式控制值为 0 至 120，百分比为 0 至 50。rem 模式将控制值除以 16，并保留两位小数。
限制与注意事项
- 不生成用斜杠区分水平、垂直半径的语法。
- 50% 在长方形上形成椭圆，只有正方形才形成圆。
- 切换百分比会沿用控制数字并限制到 50，不是按元素尺寸进行 px 到百分比换算。
- 预览没有宽度和背景设置。子图片裁剪需在项目中检查 overflow 等规则。
数据处理
数值在浏览器内处理，不上传或保存历史。CSS 文件包含所选半径。
参考资料
相关工具
- Box Shadow 生成器
给相同形状增加阴影。
- CSS clamp 生成器
制作随屏幕宽度变化的圆角。
常见问题
调整一个角会改变所有角吗？
联动开启时会。要分别调整，请先关闭联动。
为什么 rem 不是滑块原始数字？
工具将数字除以 16，例如 16 输出为 1rem。实际大小由目标页面的根字号决定。
圆角会自动裁剪子图片吗？
不一定。请另行设置组件所需的裁剪或 overflow 规则。