border-bottom-left-radius 对 table 元素本身无效，需作用于最后一行第一列的 td/th 单元格（并设 border 和 border-collapse: separate），或用带 overflow: hidden 的 wrapper 容器包裹 table 实现圆角。

border-bottom-left-radius 对 table 元素本身无效

直接给 <table> 标签写 <code>border-bottom-left-radius 基本没用——多数浏览器会忽略它。原因在于：table 是 display: table 的元素，其边框渲染机制特殊，圆角不会自动传导到最外层容器的左下角。

真正生效的 target 是 或 的左下角单元格

要看到左下圆角，必须定位到表格的**最后一行、第一列的那个单元格**（即左下角单元格），然后给它加 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> 套在一个 <code><div> 里，然后对这个 div 设置圆角和溢出裁剪： <ul> <li>给 wrapper 加 <code>border-bottom-left-radius 和 overflow: hidden

table 本身不设圆角，但需确保它不撑出 wrapper 边界（比如去掉外边距、设 margin: 0）

这样左下圆角由 wrapper 控制，不受 table 渲染逻辑干扰

关键代码片段：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<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 结构里的某个角落。