CSS 圆角生成器

border-radius 用来把任何盒子的角变圆，从卡片上不起眼的 4 px，到胶囊、圆形和有机的不规则形状都可以。这个生成器可以分别设置每个角，也可以直接输入包含水平和垂直半径的完整椭圆语法（30% 70% 70% 30% / 30% 30% 70% 70%），检查后给出最简的等效 CSS、四个分写属性和一个 Tailwind 类名。预览由您自己的浏览器根据同一个值绘制。

使用方法

1. 选择一个预设，或保持“自定义”并填写四个角的半径。
2. 选择单位：固定圆角用 px，需要随盒子缩放的形状用 %。
3. 想做不规则形状或蛋形，请输入带“/”的高级值，设置不同的垂直半径。
4. 把预览尺寸设为与您的元素一致，然后复制 CSS。

计算公式

border-radius: <左上> <右上> <右下> <左下> [ / <垂直半径> ]

与 margin 一样，缺少的值会重复使用：一个值设置所有角，两个值设置对角对（左上与右下、右上与左下），三个值时第二个值同时用于右上和左下。每个角都是四分之一椭圆，“/”前面是水平半径，后面是垂直半径。

示例

四个角 10、20、10、20 px 会简写为 border-radius: 10px 20px;。蛋形预设水平方向是 50%，垂直方向上方 60%、下方 40%，写成 border-radius: 50% / 60% 60% 40% 40%;，因为四个水平半径相同，可以合并成一个值，而垂直半径不同，无法合并。