CSS 圆角生成器

可视化调节 border-radius，支持四角独立设置、统一圆角与百分比单位，实时预览并复制 CSS 代码

参数控制与预览

拖动滑块调节四个圆角，右侧实时预览效果

开启后四个角使用同一个圆角值

10px
20px
30px
40px
实时预览
移动滑块即可看到圆角变化，圆角值会按 CSS 顺序输出
CSS 代码
border-radius 顺序：top-left → top-right → bottom-right → bottom-left 
/* 拖动滑块生成 CSS */
广告位

使用说明

  1. 拖动四个滑块分别设置左上、右上、右下、左下的圆角值（范围 0–100）
  2. 开启"统一圆角"开关，四个角将使用同一个值，便于快速设置统一圆角
  3. 切换单位 px / %，px 适用于固定尺寸元素，% 适用于自适应或正圆效果（50% 即正圆）
  4. 右侧预览区实时展示应用圆角后的彩色方块效果
  5. 点击"正圆"快速将圆角设置为 50%；点击"重置"恢复默认
  6. 点击"复制 CSS"将 border-radius 代码复制到剪贴板，直接粘贴到样式表使用

适用场景

  • 按钮设计：快速生成圆角按钮的 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 属性，兼容所有现代浏览器。