CSS border-radius 生成器

使用px、%或rem单位独立或联动调整四个角的border-radius值,提供实时预览和可直接复制的CSS代码。

浏览器本地处理 无需注册 开发者

通过联动或单独调整四个角,并选择 px、% 或 rem,生成 CSS border-radius 声明。

如何生成 CSS 圆角

  1. 选择四个角是否保持联动。
  2. 调整各角滑块并选择单位。
  3. 查看预览并复制 border-radius 声明。

生成规则

每个角使用 0 到 100 的整数滑块,并直接附加所选单位。

四个数值相同时输出一个简写值,不同时按 CSS 四角顺序输出四个值。

隐私与限制

所有处理都在浏览器本地完成。切换单位时不会进行数学换算,只会保留原数值并更换单位。

Border radius 常见问题

可以单独调整每个角吗?

可以,关闭 Linked。

支持哪些单位?

px、% 和 rem。

从 px 切换到 rem 会换算吗?

不会,数字保持不变。

四个值的顺序是什么?

左上、右上、右下、左下。

可以复制 CSS 吗?

可以直接复制生成的声明。