本文目录
理解 border-radius
CSS 的 border-radius 属性用于将元素外边框的四角变圆。它接受一到四个值，可以分别控制每个角——左上、右上、右下和左下。单个值会为四个角应用相同的圆角半径，而四个值则可以让你创建不对称的形状。
border-radius 适用于任何具有可见边框、背景或阴影的元素。它会将背景和边框一并裁剪成圆角形状，并能与 box-shadow、outline 和 overflow 正确配合。该属性是现代 UI 设计不可或缺的一环——从细微的按钮圆角到复杂的有机形状都离不开它。
用 border-radius 创建形状
通过改变圆角半径的取值，你完全可以只用 CSS 创建出各种各样的几何形状。本生成器让你直观地调整每个角，并即时看到最终的形状效果。
- 胶囊形——将 border-radius 设为 9999px（或在较宽的元素上设为 50%），即可创建两端完全变圆的胶囊按钮。这是标签、徽章和胶囊风格按钮最常见的 UI 模式
- 圆形——对一个正方形元素（宽高相等）应用 border-radius: 50%。百分比是相对于每个维度计算的，因此任何正方形都能变成一个完美的圆
- 叶片与不规则形——将两个对角设为较大的值、另两个设为零（例如 border-radius: 60% 0 60% 0），即可创建现代落地页中流行的有机叶片形、水滴形或不规则形
免费试用 —— 无需注册
生成 Border Radius CSS →进阶：椭圆圆角
border-radius 简写支持斜杠（/）语法，让你为每个角分别定义水平和垂直方向的半径。这会生成椭圆（卵形）曲线而非圆形曲线，从而实现单靠圆形半径无法做到的复杂有机形状。
- 斜杠语法——border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% 表示水平半径全部为 50%，但垂直半径各不相同（顶部 60%，底部 40%），从而形成一个蛋形
- 单角属性——border-top-left-radius: 50px 30px 会设置一个水平半径 50px、垂直半径 30px 的椭圆角。相比简写，这能提供更精细的控制
- 百分比的行为——使用百分比时，水平半径相对于元素的宽度，垂直半径相对于元素的高度。这意味着在矩形上使用 50% / 50% 会得到一个椭圆，而不是圆
常见问题
border-radius 应该用百分比还是像素值？
当你希望半径随元素尺寸缩放时（圆形、椭圆、响应式形状），使用百分比。当你希望无论元素大小都保持一致的圆角时（按钮圆角、卡片圆角、输入框），使用像素。一种常见做法是：UI 组件使用 border-radius: 8px，头像和圆形元素使用 border-radius: 50%。
border-radius 会导致亚像素渲染问题吗？
在高 DPI 显示屏上，较小的 border-radius 值（1-2px）可能会因亚像素渲染而显得有锯齿。这在低对比度背景上的细边框处尤为明显。使用稍大的半径（最小 3-4px）或应用 will-change: transform，可以改善视网膜屏幕上的渲染质量。
border-radius 如何与边框和轮廓（outline）交互？
border-radius 会将边框的外沿变圆。如果元素有较粗的边框，内圆角半径会自动计算为“外半径减去边框宽度”。在大多数浏览器中，轮廓（outline）不会跟随 border-radius——它们仍保持矩形。不过 box-shadow 会跟随圆角形状。