CSS Border Radius生成器 - 可视化圆角编辑 在线
用可视化控件创建CSS border-radius。设计圆角、药丸形状和有机blob — 复制即用CSS代码。
常见问题
什么是 CSS border-radius？
CSS border-radius 是一个简写属性，用于将元素外边框边缘的角变圆。您可以设置单个半径来创建圆形角，或者为每个角设置两个半径（水平和垂直）来创建椭圆形角。它是最常用的 CSS 属性之一，用于创建圆角按钮、卡片、头像、药丸形元素和装饰性形状。
如何使用这个 border-radius 生成器？
选择简单模式（4个角控制）或高级模式（每个角的水平/垂直8个值）。使用滑块、数字输入或拖动预览元素上的手柄来调整每个角的半径。使用链接切换按钮同时设置所有角为相同值。也可以从预设形状开始自定义。一键复制生成的 CSS 代码。
这个工具安全吗？隐私有保障吗？
是的。此工具使用客户端 JavaScript 100% 在您的浏览器中运行。不会向任何服务器发送任何数据。所有 CSS 生成和预览渲染都在您的设备上本地进行，确保完全的隐私安全。
简单模式和高级模式有什么区别？
简单模式每个角使用一个值（圆形圆角），生成如 border-radius: 10px 20px 30px 40px 的 CSS。高级模式使用斜杠记法，每个角有两个值（水平和垂直半径），生成如 border-radius: 30% 70% 70% 30% / 70% 30% 30% 70% 的 CSS。斜杠记法创建水平和垂直曲率不同的椭圆形角，可以实现有机的blob状形状。
什么时候应该使用百分比而不是像素单位？
当您希望 border-radius 随元素大小成比例缩放时使用百分比（%）——例如，border-radius: 50% 无论元素尺寸如何总是创建完美的圆形。当您希望固定一致的曲率不随元素大小变化时使用像素（px）——例如，border-radius: 8px 在不同大小的卡片上提供一致的圆角。
CSS 简写优化是如何工作的？
工具自动生成最紧凑的有效 CSS。如果4个角都相同（例如10px），它输出 border-radius: 10px 而不是重复四次。如果对角匹配（TL=BR 且 TR=BL），则使用2值简写。这与 CSS 规范的 border-radius 简写解析方式一致，帮助您避免编写冗余代码。
代码示例
// CSS Border Radius Generator
function optimizeShorthand(values, unit) {
const [a, b, c, d] = values;
if (a === b && b === c && c === d) return `${a}${unit}`;
if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}
function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}
function generateElliptical(h, v, unit = '%') {
const hPart = optimizeShorthand(h, unit);
const vPart = optimizeShorthand(v, unit);
if (hPart === vPart) return `border-radius: ${hPart};`;
return `border-radius: ${hPart} / ${vPart};`;
}
console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;
console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;
console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;