border-bottom-left-radius 对 table 元素本身无效，需作用于最后一行第一列的 td/th 单元格（并设 border 和 border-collapse: separate），或用带 overflow: hidden 的 wrapper 容器包裹 table 实现圆角。
border-bottom-left-radius 对 table 元素本身无效
直接给 <table> 标签写 border-bottom-left-radius 基本没用——多数浏览器会忽略它。原因在于：table 是 display: table 的元素，其边框渲染机制特殊，圆角不会自动传导到最外层容器的左下角。
真正生效的 target 是 <td> 或 <th> 的左下角单元格
要看到左下圆角，必须定位到表格的**最后一行、第一列的那个单元格**（即左下角单元格），然后给它加 border-bottom-left-radius。但要注意前提：
- 该单元格必须有显式边框（
border），否则圆角无从体现 - 整张表需设
border-collapse: separate（默认值），不能是collapse - 如果用了
border-collapse: collapse，圆角会被相邻单元格边框“吃掉”，几乎不可见
示例代码：
table {
border-collapse: separate;
}
table td:last-child:first-child {
border-bottom-left-radius: 12px;
border: 2px solid #333;
}
更稳妥的做法：用 wrapper 容器包住 table
绕过 table 渲染限制最可靠的方式，是把 <table> 套在一个 <div> 里，然后对这个 div 设置圆角和溢出裁剪：
立即学习“前端免费学习笔记（深入）”；
- 给 wrapper 加
border-bottom-left-radius和overflow: hidden - table 本身不设圆角，但需确保它不撑出 wrapper 边界（比如去掉外边距、设
margin: 0） - 这样左下圆角由 wrapper 控制，不受 table 渲染逻辑干扰
关键代码片段：
<div style="border-bottom-left-radius: 16px; overflow: hidden; border: 2px solid #333;">
<table style="margin: 0; border: none;">
...
</table>
</div>
IE 和旧版 Safari 的兼容性陷阱
border-bottom-left-radius 在 IE9+ 和 Safari 5.1+ 才原生支持，但实际中容易踩两个坑：
- IE11 下若 table 有
border-spacing，圆角可能错位或失效 - Safari 5–6 需要手动补
-webkit-border-bottom-left-radius，且只认像素值，不支持百分比 - 如果项目还需支持 iOS 8 或 Android 4.4 WebView，建议统一用 px 单位，避免
rem或%
兼容写法示例：
td.left-bottom-corner {
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
}
真正麻烦的不是怎么写这个属性，而是它在 table 上的表现高度依赖渲染上下文——边框模型、嵌套层级、是否启用 box-sizing、甚至 font-size 都可能间接影响最终弧度是否可见。动手前先确认你控制的是「视觉左下角」，而不是 DOM 结构里的某个角落。
