圆角生成器

可视化调整CSS border-radius,支持四角独立、椭圆角、不对称圆角,一键复制CSS。

关于 圆角生成器

圆角生成器帮助你可视化调整CSS border-radius。无论是统一圆角、四角独立圆角,还是椭圆角、不对称圆角,都能实时预览并复制CSS代码。

border-radius语法

  • 单值:border-radius: 16px; 四角相同。
  • 双值:border-radius: 16px 8px; 左上右下=16,右上左下=8。
  • 三值:border-radius: 16px 8px 4px; 左上=16,右上左下=8,右下=4。
  • 四值:border-radius: 16px 8px 4px 2px; 左上、右上、右下、左下。
  • 椭圆角:border-radius: 50% / 30%; 水平/垂直分别设置。

常用圆角值

  • 0:直角,硬朗风格。
  • 4-8px:微圆角,Material Design标准。
  • 12-16px:中等圆角,现代柔和。
  • 24-32px:大圆角,友好亲切。
  • 50%:圆形,用于头像、按钮。