🔘 CSS 圆角生成器

可视化拖拽四角圆角，预设形状，一键复制CSS代码

左上角

右上角

左下角

右下角

生成的 CSS 代码

border-radius: 20px 20px 20px 20px;

常见问题

border-radius 的值是怎么计算的？ ▼

border-radius 使用百分比或像素值来定义圆角的大小。数值越大，圆角越明显。当设置为50%时，如果元素是正方形，就会变成一个完美的圆形。CSS代码按照上左、上右、下右、下左的顺时针顺序生成。

如何使用预设形状？ ▼

点击预设网格中的任意按钮，即可快速应用对应的圆角样式。预设包括：无圆角、小圆角、中圆角、大圆角、圆形、胶囊形、树叶形、票券形、钻石形和圆方形。选择预设后，四个角的数值会自动更新。

如何复制生成的CSS代码？ ▼

点击「复制CSS代码」按钮，代码会自动复制到剪贴板。如果需要，您也可以直接选中文本框中的代码手动复制。复制的代码可以直接粘贴到您的CSS样式表中使用。

支持同时设置四个角不同的圆角吗？ ▼

是的，完全支持！四个角的输入框相互独立，您可以分别设置左上、右上、左下、右下四个角的圆角值。生成的CSS代码会包含四个独立的值，按照 border-radius: 上左上右下右下左的顺序输出。

圆角值设置为0和设置为100有什么区别？ ▼

设置为0表示完全不做圆角处理，边角保持直角。而设置为100%时，对于正方形元素会变成圆形（如果元素是长方形，则会变成椭圆形）。实际开发中常用的是10-30%的中等圆角值。