边框圆角失效最常见的原因是父容器 overflow: hidden 裁剪或 background 未设 background-clip: padding-box 导致遮挡；需优先排查这两项，再检查边框、transform 和 display 等细节。
边框圆角（border-radius）失效，最常见的原因不是写错了属性，而是被其他 CSS 规则“盖住”或“裁掉”了。重点排查两个地方：父容器的 overflow: hidden 和元素自身的 background（尤其是带渐变、图片或伪元素时）。
检查父容器是否设置了 overflow: hidden
如果圆角元素的直接父容器有 overflow: hidden，而子元素的圆角区域超出了父容器的内容盒（content box），那圆角就会被硬生生裁掉——看起来就像没生效。
- 临时去掉父容器的
overflow: hidden，看圆角是否恢复；如果恢复，说明问题在此 - 不想改 overflow？可尝试给父容器加
padding或缩小子元素尺寸，确保圆角区域在父容器边界内 - 若必须用
overflow: hidden（比如做图片裁剪），就把border-radius改到父容器上，让裁剪和圆角同步发生
确认背景是否覆盖或遮挡了圆角视觉效果
纯色背景通常没问题，但以下情况会让圆角“看不见”：
-
背景图或渐变未设置
background-clip: padding-box：默认是border-box，背景会铺满边框区域，把圆角边缘撑平或模糊掉 -
用了
background-clip: content-box或text：背景只画在内容区，边框和圆角区域完全透明，显得像没圆角 -
伪元素（如
::before）覆盖了主元素且自身没设圆角：视觉上看到的是伪元素的直角边框
解决方法：显式加上 background-clip: padding-box，确保背景止于内边距边缘，不干扰边框圆角渲染。
立即学习“前端免费学习笔记（深入）”；
其他常见干扰项
这些细节也容易导致圆角“消失”：
-
边框宽度为 0 或未设置
border：border-radius本身不依赖边框存在，但若同时用了outline，它不支持圆角，会盖住真实圆角 -
使用了
transform: scale()或zoom：某些浏览器下缩放会重置或破坏圆角渲染（尤其旧版 Safari/IE） -
元素是 inline 元素（如
span）且未设display: inline-block或block：inline 元素对border-radius支持有限，行为不稳定
基本上就这些。优先盯住 overflow 和 background-clip，90% 的“圆角失效”都能当场定位。不复杂但容易忽略。
