CSS 圆角生成器
免费线上 CSS 圆角生成器。即时预览并产生 CSS border-radius 代码，支持 px 与 % 单位。
即时预览并生成 CSS border-radius 圆角代码，轻松为按钮、卡片等 UI 组件创建自定义圆角与有机造型。
CSS 圆角生成器
免费线上 CSS 圆角生成器。即时预览并产生 CSS border-radius 代码，支持 px 与 % 单位。
关于这个工具
即时预览并生成 CSS border-radius 圆角代码，轻松为按钮、卡片等 UI 组件创建自定义圆角与有机造型。
圆角设定
区块设定
背景颜色
区块颜色
圆角设定
px
左上角 (10px)
右上角 (10px)
右下角 (10px)
左下角 (10px)
结果将显示于此...
预览
CSS 代码
圆角设定
区块设定
背景颜色
区块颜色
圆角设定
px
左上角 (10px)
右上角 (10px)
右下角 (10px)
左下角 (10px)
常见问题
关于这个主题的常见疑问与实用解答。
可以为每个角设置不同的圆角值吗？
可以，您可以分别设置左上、右上、右下与左下各角的圆角值，或使用「所有角落」一次统一设置。
支持哪些单位？
支持像素（px）与百分比（%）。使用百分比可创建响应式造型，例如圆形（50%）或胶囊形状。
可以制作圆形或胶囊形状吗？
可以，将所有角设为 50% 即可在正方形元素上创建完美圆形，或在矩形元素上使用较大的像素值创建胶囊形状。
我的数据会被发送到服务器吗？
不会，border-radius CSS 生成完全在您的浏览器中处理。您的圆角值在本地处理，不会上传任何数据。