toolsmoah

边框圆角生成器

直观地创建和预览 CSS border-radius 属性。

生成的 CSS
调整每个角的圆度
预览
预览生成的边框圆角效果
预览
生成的 CSS
border-radius: 20px;
示例
点击预定义的边框圆角样式以应用它们
边框圆角属性

属性顺序

border-radius 属性按顺时针顺序应用：左上 → 右上 → 右下 → 左下

简写属性

  • • border-radius: 10px; - 应用于所有四个角
  • • border-radius: 10px 20px; - 第一个应用于左上和右下，第二个应用于右上和左下
  • • border-radius: 10px 20px 30px; - 第一个应用于左上，第二个应用于右上和左下，第三个应用于右下
  • • border-radius: 10px 20px 30px 40px; - 按顺序应用于左上、右上、右下和左下

使用技巧

  • • 使用 50% 创建一个完美的圆形
  • • 4-8px 通常适用于按钮
  • • 8-16px 通常用于卡片和面板
  • • 不对称的半径可以创建独特的设计效果
    边框圆角生成器 | toolsmoah