CSS 圆角生成器
可视化调节 border-radius，支持四角独立设置、统一圆角与百分比单位，实时预览并复制 CSS 代码
参数控制与预览
拖动滑块调节四个圆角，右侧实时预览效果
开启后四个角使用同一个圆角值
10px
20px
30px
40px
实时预览
移动滑块即可看到圆角变化，圆角值会按 CSS 顺序输出
CSS 代码
border-radius 顺序：top-left → top-right → bottom-right → bottom-left
/* 拖动滑块生成 CSS */适用场景
- 按钮设计：快速生成圆角按钮的 border-radius 数值
- 卡片布局：为头像、缩略图、信息卡片设置四角独立圆角
- 正圆头像：使用 50% 单位快速生成圆形头像样式
- 不规则形状：通过四角不同值创建花瓣、叶子等异形元素
- 响应式适配：使用 % 单位让圆角随容器尺寸自适应缩放
安全保障
- 本地生成：所有圆角计算与代码生成均在浏览器本地完成
- 隐私保护：不收集、不存储任何用户操作数据
- 无网络请求：整个生成过程不发起任何外部请求
- 免费使用：无需注册登录，打开即用
常见问题
四个值的顺序是什么？
CSS border-radius 四值写法按顺时针方向：top-left（左上） → top-right（右上） → bottom-right（右下） → bottom-left（左下）。本工具的输出严格遵循此顺序。
px 和 % 单位有何区别？
px 是固定像素值，圆角大小不随元素尺寸变化；% 是相对于元素本身的宽高，圆角会随元素大小自适应。例如 50% 在正方形元素上即为正圆，在矩形元素上为椭圆。
如何制作正圆？
两种方式：1) 点击"正圆"按钮，自动切换单位为 % 并设为 50；2) 手动将单位切换为 %，将四个角滑块都拖到 50。注意正圆要求元素宽高相等。
为什么浏览器有时显示不出圆角？
常见原因：1) 元素被 overflow:hidden 包裹但内部内容溢出；2) 父元素设置了 transform 或 will-change 影响渲染；3) 旧版浏览器不支持 border-radius（现代浏览器均已支持）。本工具生成的代码使用了标准 border-radius 属性，兼容所有现代浏览器。