CSS 圆角生成器

可视化制作 CSS border-radius，实时预览并复制可直接用于生产的代码。

预览拖动四角的控制点

CSS

border-radius: —;

100% 私密——所有处理都在你的浏览器中完成，不会上传任何内容。

联动所有圆角

所有圆角

水平半径

垂直半径

元素

填充颜色

背景颜色

预设

关于 CSS 圆角生成器

CSS 圆角生成器可以制作从柔和圆角卡片到有机斑点形状的各种效果。你可以直接在预览上拖动四角的控制点，也可以按数值设置每个角——包括完整的八值语法，即每个角都拥有各自独立的水平和垂直半径。正是这第二个轴向解锁了蛋形、树叶形、水滴形和斑点形。

“同步四角”开关可让四个角保持一致，实现经典的统一圆角；取消同步后，每个角都可以自由设置，从而实现非对称形状。十二种预设——圆角、胶囊形、圆形、方圆形（squircle）、两种斑点形、树叶形、蛋形、拱形、水滴形、花瓣形和波浪形——展示了该属性的各种可能性，随机按钮还能不断生成全新的有机形状。

你可以更改单位，为元素和画布重新配色以匹配你的设计，并复制单纯的 border-radius 值或完整的 CSS 规则。该工具 100% 在客户端运行——不上传任何内容。

斜杠前的值是四个角的水平半径；斜杠后的值是垂直半径。让两个轴向在每个角上各不相同，正是把一个普通圆角方块变成蛋形、树叶形或斑点形的关键所在。

要做圆形，可使用正方形元素并设置 border-radius: 50%。要做胶囊形，给任意矩形设置至少为其高度一半的半径即可——圆形和胶囊形预设可以立即完成这两种设置。

会——border-radius 会裁剪元素的盒子，包括背景图片，而 overflow: hidden 会将裁剪范围扩展到子内容。将斑点形圆角应用于 img 元素，是获得有机照片蒙版的快捷方法。

可以，当两个状态使用兼容的单位时，border-radius 可通过 CSS 过渡平滑插值。在悬停时于两个斑点形值之间做动画，是一种很受欢迎的有机变形效果——在这里生成两个状态，然后在它们之间添加过渡。

是的，完全免费且注重隐私：它仅在你的浏览器中运行，无需账户，也不会向任何地方发送数据。