CSS Border-Radius 生成器

通过实时预览和可复制的CSS代码，可视化调整圆角。

垂直半径：

px
px 
{{ cssOutput }}

什么是 border-radius？

CSS属性 border-radius 可以将元素的角变为圆角。您可以为四个角设置统一的半径，也可以分别设置每个角。简写语法的顺序为：左上、右上、右下、左下。

椭圆形边框半径

使用扩展语法 border-radius: H1 H2 H3 H4 / V1 V2 V3 V4，您可以为每个角定义水平和垂直半径。这将创建椭圆曲线，产生更具有机感的形状。

常见用途

  • 圆形：在正方形元素上使用 border-radius: 50%。
  • 药丸形状：使用 border-radius: 9999px 制作圆角按钮。
  • 卡片：使用 border-radius: 8px 到 16px 打造现代卡片设计。
  • Blob形状：使用不同的水平和垂直半径创建有机形状。