⬜
圆角生成器
分别调节四角圆角(含不对称椭圆圆角),实时预览并生成 border-radius。
本地处理 · 不上传
加载工具中…
相关：圆角生成 · border-radius · 不规则圆角 · CSS圆角 · 有机形状
圆角生成器可视化调整元素的四个角的圆角半径，支持椭圆圆角，实时预览并输出 CSS。用百分比设置圆角能随尺寸自适应，50% 会让正方形变成圆形。
使用步骤
- 拖动滑块调整各角半径
- 按需设置椭圆圆角
- 预览效果
- 复制生成的 CSS
使用场景
- 设计卡片与按钮的圆角
- 制作不规则的有机形状
- 统一项目的圆角规范
- 调试现有元素的圆角
小贴士
- 用百分比设置圆角能得到随尺寸自适应的效果，50% 会让正方形变成圆形。
- 圆角半径应形成层级：小元素（按钮、标签）用小圆角，大容器（卡片、弹窗）用大圆角，全站统一比每处各调更协调。
- 斜杠语法可以分别设置水平与垂直半径，从而做出椭圆圆角与有机形状。
常见问题
怎么做成圆形？
把 border-radius 设为 50%，元素为正方形时就是圆形，长方形则变成椭圆。用百分比而非固定像素，尺寸变化时形状也会自适应。
圆角大小怎么统一？
建立一套圆角规范，通常三到四档：小（按钮、输入框）、中（卡片）、大（弹窗、容器）、全圆（头像、药丸按钮）。定义成 CSS 变量后全站引用。
斜杠语法是什么？
`border-radius: 50px / 20px` 表示水平半径 50、垂直半径 20，形成椭圆圆角。八个值的完整写法能分别控制四个角的两个方向，用来做有机的不规则形状。
圆角生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用圆角生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。