border-radius 失效主因是值为0或负数、父容器overflow:hidden未触发层叠上下文、被高优先级样式覆盖、或元素无border/背景色导致不可见。
border-radius 值写成 0 或负数导致圆角失效
很多情况下圆角不显示，不是 CSS 没生效，而是 border-radius 被设成了 0、0px 或非法的负值（比如 -5px）。CSS 规范明确禁止负的 border-radius，浏览器会直接忽略整条声明。
- 检查开发者工具中该元素的 computed 样式，看
border-radius是否真的被解析为有效值（如8px） - 避免使用
border-radius: -2px这类写法——它不会报错，但会被静默丢弃 - 如果用预处理器（如 Sass），确认变量未意外展开为 0 或负数，例如：
$radius: 0; border-radius: $radius;
父容器 overflow: hidden 但子元素未触发渲染层叠上下文
当父容器设置了 overflow: hidden，而子元素又恰好没有建立自己的层叠上下文（transform、opacity、will-change 等未启用），部分浏览器（尤其是旧版 Safari 和某些 Android WebView）可能裁剪掉圆角区域，看起来像“圆角没生效”。
- 给圆角元素加一句
transform: translateZ(0)或will-change: transform，强制创建层叠上下文 - 确保父容器的
border-radius和overflow: hidden是同时设置的；单独设overflow: hidden不会自动裁出圆角 - 不要依赖父容器的圆角去“遮罩”子元素——子元素自身必须有
border-radius
border-radius 被其他样式覆盖或重置
常见于 CSS 框架（如 Bootstrap、Tailwind）或重置样式表（reset.css / normalize.css）中，border-radius 可能被显式设为 0，尤其在按钮、输入框、图片等基础元素上。
- 在开发者工具中逐层查看 Styles 面板，注意带删除线的
border-radius条目——说明被更高优先级规则覆盖 - 检查是否引入了类似
button { border-radius: 0 !important; }的全局重置 - 若用 Tailwind，确认没误写成
rounded-none；Bootstrap 5 中默认按钮是rounded，但自定义 class 可能覆盖它
元素无 border 或背景色导致圆角不可见
border-radius 本身只控制「轮廓形状」，不产生视觉效果。若元素既无 border 又无 background-color（或背景图），即使圆角已正确应用，你也看不到任何变化。
立即学习“前端免费学习笔记（深入）”；
div {
width: 100px;
height: 100px;
border-radius: 20px;
/* ❌ 没有 border 或 background，什么也看不见 */
}- 加上
background: #007bff或border: 2px solid #007bff才能验证圆角是否生效 - 对透明 PNG 图片，需确保其父容器有
border-radius且设了overflow: hidden，否则图片边缘仍会溢出 - 使用
outline不受border-radius影响——别指望用 outline 显示圆角
圆角不显示，八成不是语法错误，而是被覆盖、被裁剪、被隐藏，或者根本没东西可“圆”。重点盯紧 computed 样式里的真实值，再确认视觉载体是否存在。
