table加border-radius无效的根本原因是border-collapse: collapse禁用圆角；img失效主因是缺宽高或父容器未设overflow: hidden；推荐用外层div包裹并设overflow: hidden实现兼容性圆角。
直接给 HTML 元素加 border-radius 大概率能生效，但表格（table）、图片（img）和某些框架生成的组件常会“不圆”，根本原因不是写法错，而是渲染机制或父容器干扰导致圆角被忽略或裁剪失败。
table 元素加 border-radius 为什么没反应
因为绝大多数表格默认启用 border-collapse: collapse，此时浏览器规范明确禁止对 table 应用 border-radius——边框被合并成一条线，没有独立外轮廓可圆。你看到 computed style 里值存在，但视觉上仍是直角，这是预期行为，不是 bug。
常见错误包括：
- 只写
.my-table { border-radius: 8px; }，没处理裁剪和外轮廓 - 试图给
th或td单独加border-radius拼凑效果，结果单元格直角顶破边缘 - 用
border-collapse: separate强行启用，却引发双线边框、列宽错乱等副作用
推荐方案：用外层 div 包裹并设 overflow: hidden，让容器承担圆角职责，表格只负责结构。例如：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.my-table {
width: 100%;
border-collapse: collapse;
}
这个方案兼容所有现代浏览器（Chrome 110+、Firefox 102+、Safari 16.4+），且不依赖 JS 或修改原始 HTML 结构。
img 元素圆角失效的典型场景
img 是替换元素，border-radius 对它本身生效，但容易被两个因素破坏：一是没设明确宽高，二是被父容器的 overflow: hidden 意外截断（或漏设）。
具体表现：
-
border-radius: 50%写了，但头像还是方的 → 检查width和height是否相等且已声明 - 图片在卡片里圆角不完整 → 父容器没加
overflow: hidden，或加了但用了transform导致裁剪失效（旧版 Chrome） - 响应式布局下圆角忽大忽小 → 百分比值随容器缩放，但宽高比不一致时会变椭圆，而非正圆
稳妥写法示例（直接作用于 img）：
<img src="avatar.jpg" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;">
不推荐给父 div 加 border-radius 后只靠它裁剪——除非你同步确保该 div 有 overflow: hidden 且无 transform 干扰。
outline 替代 border 实现 table 圆角边框
想保留 border-collapse: collapse 的整洁内边框，又需要带圆角的外边框？用 outline 是最稳解法。它不参与盒模型，不受 border-collapse 影响，位置精准可控。
关键配置：
- 必须同时设
border-radius和overflow: hidden在table上（仅用于裁剪，非视觉边框） - 用
outline: 2px solid #4a90e2+outline-offset: -2px紧贴表格边缘，视觉即“带圆角的边框” - 避免
outline-offset: -1px这类小数值，subpixel 渲染易模糊或错位
注意：outline 在 Firefox 中默认随键盘焦点显示（如 tab 进入），静态表格建议保留；若为交互控件需禁用，应加 outline: none，但仅限可聚焦元素。
border-radius 值写法与常见陷阱
border-radius 不是“写了就圆”，它依赖元素具备可渲染的块状区域。空元素、未设宽高的内联元素、被父容器塌陷的容器，都可能让圆角“不可见”。
必须检查的点：
- 元素是否设置了
display: block或inline-block（inline元素默认不响应border-radius） - 是否有背景色（
background-color）或边框（border）提供视觉锚点 - 百分比值（如
50%）是否匹配宽高比——正圆要求宽高等值，否则是椭圆 - 多值写法顺序是顺时针：左上、右上、右下、左下；斜杠语法（如
10px / 5px）控制横纵半径，但旧版 Safari 支持不稳定
最容易被忽略的是：当元素使用 box-shadow 或渐变背景时，outline 无法投影，overflow: hidden 又可能裁掉阴影。这时必须用外层包裹容器，把圆角、阴影、背景全部交给它控制。
