圆角生成器

拖动四个角的滑块实时预览圆角效果，自动生成标准简写形式的 border-radius 样式代码，支持 px、rem 与百分比单位，一键复制即可用于你的项目。

圆角参数已就绪

左上角

右上角

右下角

左下角

单位

同步四个角

拖动滑块或直接输入数值，下方实时预览圆角效果。px / rem 取值范围 0-200，百分比最高 50。

实时预览与代码

圆角预览

生成的 CSS 将显示在这里。

说明

简写规则：1 个值 = 四角相同；2 个值 = 左上右下、右上左下；3 个值 = 左上、右上左下、右下；4 个值 = 左上、右上、右下、左下。
生成的代码为标准 CSS 的 border-radius 简写形式，兼容所有现代浏览器。
百分比圆角超过 50% 时，浏览器会按自身尺寸计算并呈现为椭圆弧。
本工具完全在浏览器本地运行，输入的数据不会上传到任何服务器。