Developer Design Utility
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 代码”按钮。
帮助
什么时候使用 Border Radius 生成器？
在创建卡片、按钮、图片、模态框、输入框等需要圆角效果的 UI 元素时使用。通过实时预览调整参数，可以提高设计效率。
border-radius 参数顺序
border-radius 简写形式按照左上、右上、右下、左下的顺序应用。
- 第一个值：Top Left
- 第二个值：Top Right
- 第三个值：Bottom Right
- 第四个值：Bottom Left
推荐数值
- 小按钮：8px ~ 12px
- 普通卡片 UI：16px ~ 28px
- SaaS 风格大卡片：24px ~ 36px
- 胶囊按钮：999px
- 圆形图片：50%
px、% 与 rem 的区别
px 适用于固定圆角尺寸；% 常用于圆形图片或按比例变化的形状；rem 会根据网站基础字体大小进行缩放。
如何创建完全圆形的图片？
对正方形图片或容器应用 border-radius: 50%; 即可创建圆形效果。
胶囊按钮应该使用什么数值？
使用远大于按钮高度的数值（如 999px）即可创建两端完全圆润的胶囊按钮。
四个圆角使用不同数值会有什么效果？
可以创建斜角卡片、对话气泡卡片或不规则图片框等更具个性的 UI 样式。