CSS 圆角生成工具
左上、右上、右下、左下四角独立调节，实时预览，一键生成 border-radius 代码，支持 px / % / rem / em 四种单位。
四角参数 / Corners
0 – 999
预览与代码 / Preview
就绪
预览
四角 4 值
代码 0 字符
耗时 0 ms
就绪
About
border-radius 怎么写
四个值依次对应「左上、右上、右下、左下」；四个值相同时会自动收拢成一个值，两个值时按「左上右下 / 右上左下」对角复用。本工具实时预览并按最简形式输出代码。
常用场景
- 卡片统一圆角：全站 12–16px 一套值，直接复制进设计规范
- 胶囊按钮：四角设 999px（或高度一半），输出会自动收拢为单值
- 对角造型：左上/右下设大值、另外两角为 0，做出叶形与徽章底
小提示
单位选 % 时圆角随元素尺寸等比缩放，适合宽高不固定的头像与徽标；需要不同角用不同单位（如左上 16px 右下 %）时，改完预览直接到代码里微调即可。