圆角生成器

分别设置四个圆角、一键联动，并复制 CSS border-radius 代码。

100% 隐私保护——一切都在浏览器中运行

使用方法

1
为每个角输入圆角值，或打开「四角联动」一次性设置。
2
选择预设，或粘贴已有的 border-radius 值继续编辑。
3
复制生成的 CSS 粘贴到样式表中使用。

示例

圆角卡片

输入

四角均为 16px

输出

border-radius: 16px;

只圆上方两角

输入

16px 16px 0 0

输出

border-radius: 16px 16px 0 0;

常见问题

怎么做正圆？

元素为正方形时把四角都设为 50%，套用「圆形」预设即可。

四个角可以形状不同吗？

可以，每个角都支持独立数值，也支持 40% 20% 这样的椭圆写法。

最大能设多少？

任意长度都可以，超过元素尺寸一半的部分浏览器会自动限制。

相关工具

CSS 阴影生成器用滑块实时调节 CSS box-shadow，套用预设并预览，一键复制可用代码。渐变生成器可视化创建 CSS 线性与径向渐变，一键复制 CSS 代码。CSS 颜色生成器将基色扩展为 10 级色阶，并导出为 CSS 变量。JSON 格式化在浏览器中即时格式化、美化、压缩和校验 JSON。JSON 校验在浏览器中即时检查 JSON 是否合法，错误精确定位到行、列和位置。Base64 编码/解码在浏览器中即时完成文本与 Base64 的相互转换，完整支持 Unicode、中文、日文、韩文和 Emoji。