CSS 工具
CSS 圆角生成器
创建带8角视觉控制的CSS border-radius形状。制作平滑圆角和有机blob形状，带可复制代码。
cssborder radiusgeneratorrounded corners
CSS Border Radius Generator
Top Left12px
Top Right12px
Bottom Right12px
Bottom Left12px
Preview
CSS Code
border-radius: 12px;
What is CSS 圆角生成器?
CSS圆角生成器是一款交互式设计工具，以可视化方式创建border-radius CSS声明，而不是手动编写复杂的8值border-radius简写。现代CSS border-radius在使用斜杠表示法时最多支持8个值，不仅可以实现简单的均匀圆角矩形，还能实现有机的不对称blob形状、药丸按钮、胶囊形状、蛋形、叶状形式和组件库的自定义设计令牌。本生成器提供实时视觉形状，带有8个单独的可拖动手柄以实时雕刻精确的形式。常见形状预设一键可用：完美圆形、标准圆角、光滑药丸按钮、iOS风格的软圆角、Squircle风格、有机Blob和不对称形状。您还可以锁定所有角落以进行均匀舍入，或解锁它们以进行自定义不对称设计。工具不仅输出border-radius属性，还输出较旧的-webkit-border-radius和-moz-border-radius前缀以实现传统兼容性，并附带动画演示说明每个属性的作用。
When to Use CSS 圆角生成器
用于设计自定义按钮形状、有机Blob分隔符、Squircle个人资料图片、不对称卡片角落、iOS风格的软圆角、胶囊药丸按钮，或自定义组件库形状令牌。
How to Use CSS 圆角生成器
在视觉形状上拖动8个手柄，单击预设形状，或手动输入半径值。切换对称或不对称模式。复制带可选供应商前缀的border-radius CSS。