overflow: hidden 不裁剪边框，只裁剪 content 和 padding 区域；border 绘制在 padding 外侧，故不受影响，属标准行为而非 bug。
overflow: hidden 对边框本身不生效——它裁剪的是内容区域，不是 border 的绘制区域。 边框（border）属于元素盒模型的“边界线”，而 overflow 的裁剪边界只到 content + padding 区域为止，border 和 margin 都在裁剪范围之外。所以你看到边框“没被截断”，不是 bug，是标准行为。
overflow: hidden 的裁剪边界在哪
浏览器对 overflow: hidden 的裁剪，严格发生在 content box 的边缘（加上 padding 后形成的矩形区域）。这个区域之外的内容会被隐藏，但：
-
border绘制在 padding 区外侧，因此完全不受裁剪影响 -
margin在 border 外侧，更不会被裁 - 伪元素（如
::before）若超出该区域，会被裁；但若它生成了 border，那 border 本身仍可能部分露出来
为什么 border 看起来“被遮住了”
真正让你误以为 “overflow: hidden 没起作用” 的，往往是视觉干扰，而非裁剪失效。常见情况包括：
- 父容器设置了
overflow: hidden，但子元素用了position: absolute且其包含块（containing block）不是该父容器 → 裁剪根本没作用到它 <table> 或 <code><td> 上同时设了 <code>background和border，在 Firefox 中 background 默认画到 border 区域，把 border 盖住了- 用了
background-clip: border-box（默认值），导致背景溢出盖住 border；应改用background-clip: padding-box - 边框是用
::after伪元素模拟的，而伪元素被父级overflow: hidden裁掉了——这不是 border 问题，是伪元素定位越界 - 给父容器加
border-radius+overflow: hidden：这样内容和图片会被圆角裁切，border 也自然落在裁切区内 - 避免在
border外再加outline：outline 不受 overflow 控制，且不支持border-radius，会破坏圆角视觉 - 对
<table> 类元素，显式写 <code>background-clip: padding-box，防止 background 覆盖 border - 如果必须用
margin推开边框，请改用padding：margin 不占容器内空间，容易让边框“悬空”在裁剪区外
想让圆角+边框和内容一起被“整齐裁掉”怎么办
要达成视觉上“边框也被裁”的效果，不能指望 overflow: hidden 去动 border，而是得让它裁掉 border 外围的内容，再配合其他规则让 border 自身“退到可裁范围内”：
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点是：overflow: hidden 从不裁 border，也不裁 outline，它只管 content + padding 内部的东西。如果你在调试时反复删样式却始终看到边框“漏出来”，先确认它是不是被 background 盖了、是不是伪元素越界、或者根本就没被父容器当成 containing block——而不是怀疑 overflow 本身坏了。
