圆角生成器
生成 CSS border-radius 圆角代码
CSS 圆角生成器
左上角: 20px
右上角: 20px
右下角: 20px
左下角: 20px
border-radius: 20px 20px 20px 20px;
CSS 圆角生成器
可视化调整 border-radius 参数，实时预览圆角效果，自动生成 CSS 代码。 通过拖动滑块分别控制左上角、右上角、右下角和左下角的圆角大小， 四个角既可以统一设置，也可以单独调整出不对称的卡片造型。
常见用途
- 设计按钮、卡片、输入框的圆角风格
- 快速实现胶囊形标签、圆形头像等造型
- 调整设计稿还原时的圆角细节
使用说明
满意后直接复制生成的 border-radius 代码粘贴到样式表即可。 本工具在浏览器本地完成预览与代码生成，不收集任何输入内容。
圆角数值越大，造型越柔和；完全为零时是直角卡片，适合偏硬朗的设计风格。