CSS border-radius 生成器

工作原理

CSS 属性 border-radius 最多可接受四个值,分别对应左上、右上、右下、左下四个角。该工具让您独立设置每个圆角,并在复制代码前先查看效果。

如何创建一个完美的圆形或椭圆形?

将四个圆角的单位设为“%”并设置为 50%:应用于正方形元素时会产生一个完美的圆形;应用于矩形时会产生一个椭圆形。

为什么要对不同角使用不同的值?

非对称的圆角可以创造有机形状或“水滴”效果,常用于通知气泡或装饰性元素。

100% 本地处理:计算完全在您的浏览器中通过 WebAssembly 完成,不会向任何服务器发送数据。