Border Radius Generator

关于本工具

border-radius 属性可使元素的角变圆。当四个值相等时，使用单值简写。不同的值会产生不对称形状——胶囊形在所有角使用 50%，叶形交替使用 0% 和 50%。

点击任意角的数字直接输入值，或拖动关联滑块一次更改所有四个角。关闭锁定所有角可独立控制每个角。

使用方法

1. 在四个角的输入框（左上、右上、左下、右下）中输入值。
2. 启用锁定所有角，可通过滑块同时设置四个值。
3. 根据设计需求在 px 和 % 单位之间切换。
4. 点击预设（胶囊形、叶形、水滴形等）立即应用预定义形状。

使用场景

UI 设计师使用 border-radius 创建按钮、卡片和头像形状。开发者根据品牌设计系统微调圆角。胶囊形（50%）常用于标签和徽章。非对称值可为装饰元素创建有机的叶形或水滴形。

常见问题

• px 和 % 有什么区别？ — px 给出与元素大小无关的固定圆角半径。% 相对于元素的宽度和高度——正方形元素所有角使用 50% 将产生完美的圆形。
• 可以为每个角设置不同的半径吗？ — 可以。取消选中锁定所有角，然后在每个角的输入框中输入不同的值。
• 简写输出值是什么意思？ — 当四个角相等时，输出单个值。不同时，CSS 顺序为：左上、右上、右下、左下。