table直接加border-radius无效是浏览器规范行为：border-collapse: collapse使表格失去外轮廓，边框实际属于th/td而非table；最简方案是table同时设border-radius和overflow: hidden，并用outline模拟外边框。
table 直接加 border-radius 为什么没效果
不是你写错了，是浏览器规范决定的：border-collapse: collapse（绝大多数框架、CMS、模板默认启用）会让所有单元格边框“合并”成一条线，table 元素自身失去可渲染的外轮廓，border-radius 就没地方生效。哪怕写了 border-radius: 8px，四个角照样尖锐。
常见错误现象包括：圆角区域空白、内部单元格直角“顶破”边缘、边框错位或消失。用开发者工具检查 table 的 computed styles，如果 border 显示为 none 或极小值，说明边框实际来自 th/td，而非 table 本身。
最简可靠方案：table + overflow: hidden + outline
不改 HTML 结构，兼容 Chrome/Firefox/Safari（iOS 14+），只需三步：
-
table上同时设置border-radius和overflow: hidden—— 后者裁掉直角单元格溢出部分，是关键 - 用
outline模拟外边框，避免与border-collapse: collapse冲突；outline-offset: -2px必须为负值，且绝对值等于outline-width - 保留
border-collapse: collapse，不碰内部边框逻辑，结构稳定
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.rounded-table {
border-radius: 0.75em;
overflow: hidden;
outline: 2px solid #e0e0e0;
outline-offset: -2px;
border-collapse: collapse;
}
只圆某个角？比如左下角，该动 td 还是 div
直接给 table 加 border-bottom-left-radius 基本无效。真正能生效的是最后一行第一列的 td 或 th，但前提是：
- 表格必须设
border-collapse: separate（border-spacing: 0） - 那个单元格要有显式
border，否则圆角无从体现 - 选择器要精准：
tr:last-child > td:first-child
更稳妥的做法是套一层 div，只给它设 border-bottom-left-radius 和 overflow: hidden，table 自身保持默认样式。这样不依赖单元格结构，也不怕 colspan/rowspan 打乱选择器。
移动端和旧浏览器要注意什么
这个方案在现代浏览器没问题，但有几点容易被忽略：
- 老版 Edge（≤18）可能有轻微锯齿，Safari（iOS 15.4 以下）对
overflow: hidden在table上的支持略保守 - 如果表格嵌在
flex或grid容器里，父元素没设min-width或宽高，overflow: hidden可能失效 -
outline在 Firefox 中默认随焦点显示（如键盘 tab），静态表格建议保留；若必须禁用，加outline: none即可，但仅限交互型表格 - 单位优先用
em或rem，不用%—— 表格宽高常由内容撑开，百分比不可控
复杂点不在写法，在判断：先看是否用了 border-collapse: collapse，再看边框到底画在哪一层，最后决定是裁剪还是逐单元格控制——选错前提，后面全白搭。
