border-radius 超过宽高一半时会被自动裁剪为 min(width, height)/2，属规范行为；可用 / 语法分别设置水平/垂直半径实现椭圆角，且各自受限于对应方向尺寸的一半。
border-radius 超过盒子一半尺寸时会失效
当 border-radius 的值大于元素 width 或 height 的一半时，浏览器会自动将其裁剪为最大可接受值（即 min(width, height) / 2），不会报错，但视觉上“圆不起来”。比如一个 width: 100px; height: 40px; 的盒子设 border-radius: 30px;，实际生效的只有 20px（因为 40px / 2 = 20px）。
- 这是 CSS 规范行为，不是 bug，所有主流浏览器一致
- 可通过
border-radius: 20px / 20px;显式控制水平/垂直方向半径，避免隐式截断 - 若需椭圆角效果（如宽高差异大时仍保持大弧度），必须用
/语法分别指定
用 border-radius: A / B 实现非对称圆角适配宽高差
当盒子宽高差异明显（例如卡片、按钮、头像容器），直接写单值 border-radius: 20px 很容易被截断。改用双值语法可绕过限制：
div {
width: 200px;
height: 60px;
border-radius: 30px / 15px; /* 水平半径30px，垂直半径15px */
}此时即使 30px > 200px / 2？不成立（200 / 2 = 100），所以没问题；但重点是：分母是各自方向的尺寸，互不干扰。真正限制是：水平半径 ≤ width / 2，垂直半径 ≤ height / 2。
-
border-radius: 100px / 30px在width: 200px; height: 60px下完全合法 -
border-radius: 120px / 30px就会触发水平方向截断（120 > 200 / 2→ 实际取100px） - 百分比值同理：
border-radius: 50% / 25%表示按宽高的百分比计算，更灵活
flex 或 grid 容器中 border-radius 失效的常见原因
如果盒子本身尺寸由父容器弹性撑开（如 flex: 1 或 grid-area），而你又没给它明确的 width/height，border-radius 可能表现异常——不是值被截断，而是渲染顺序导致圆角被子内容“顶破”或被父层裁剪。
立即学习“前端免费学习笔记（深入）”；
- 检查是否父容器设置了
overflow: hidden但未预留足够内边距，导致圆角被剪掉 - 子元素若使用
position: absolute或transform移出边界，也会覆盖圆角区域 - Flex 项目默认
min-width: auto，可能压缩宽度使border-radius计算基准变小；加min-width: 0或显式设宽可稳定行为
用 calc() 动态适配 border-radius 避免硬编码
当需要响应式圆角（比如移动端缩小盒子后圆角也要同比例缩），硬写像素值容易失配。用 calc() 结合相对单位更可靠：
button {
width: 100%;
max-width: 300px;
height: 48px;
border-radius: calc(48px / 2); /* 基于 height 自动算出最大圆角 */
}
<p>@media (max-width: 480px) {
button {
height: 40px;
border-radius: calc(40px / 2);
}
}注意：calc() 里不能直接用 50% 表示“一半”，因为百分比在 border-radius 中是相对于宽高的，而 calc(50%) 无效；必须基于已知尺寸做运算。
- 若高度不固定，可用
clamp()+vh或em等相对单位估算基准 - 慎用
border-radius: 50%于非正方形盒子——它会强制变成椭圆，且在某些旧 Android WebView 中有渲染偏差
实际项目里最常被忽略的是：border-radius 的生效前提是盒子有明确的渲染尺寸和未被裁剪的上下文。很多“圆不了”的问题，根源不在圆角值本身，而在尺寸计算链或层叠上下文中某个环节意外收缩或溢出。
