圆角生成器

CSS border-radius属性在线生成工具

Border Radius 圆角生成器可视化调整四角半径，支持椭圆角和百分比单位，适合快速创建圆形、胶囊形、不规则圆角。

Border Radius 生成器

圆角半径

锁定四边

TL: 12px

TR: 12px

BR: 12px

BL: 12px

左上角 (Top-Left)12px

右上角 (Top-Right)12px

右下角 (Bottom-Right)12px

左下角 (Bottom-Left)12px

CSS 代码

.box {
  border-radius: 12px;
}

/* 完整写法 */
.box {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

使用说明

拖动滑块调整四个角的圆角半径，生成可复制的CSS代码。支持px和百分比单位。

使用步骤

拖动四个角的滑块设置圆角半径。
勾选「链接」同步四个角或单独调整。
实时预览圆角效果和椭圆角。
复制生成的 border-radius CSS 代码。

常见问题

如何创建圆形？

将四个角设为相同值且大于等于元素宽高的一半（50%），即可得到圆形。

椭圆角如何实现？

border-radius 支持水平/垂直两个值，如 border-radius: 50% / 30% 生成椭圆角。本工具支持单独设置。

百分比和像素单位有什么区别？

像素是固定值，百分比相对于元素尺寸。百分比圆角响应式更好，但不如像素精确。