最稳妥方式是利用 Bootstrap 5.3+ 的 CSS 变量 --bs-border-color；全局修改在 :root 中重设该变量，局部修改则新增类并同时声明 th、td 和 thead th 的 border-color。
直接改 .table-bordered 的边框颜色，最稳妥的方式不是覆盖一堆选择器，而是利用 Bootstrap 5.3+ 内置的 CSS 变量——只要你的项目没禁用或绕过它。
为什么不能只写 .table-bordered td { border-color: red !important }
因为 .table-bordered 实际生效的边框规则分散在多个地方：th、td、thead th、tbody tr 都有独立声明；手动覆盖容易漏掉某一处（比如表头），导致颜色不一致。更麻烦的是，!important 会干扰后续主题切换或暗色模式适配，且和 Bootstrap 自己的 border-collapse: collapse 协同时可能渲染出双线或虚边。
-
.table-bordered依赖border-color变量，不是硬编码值 - 所有单元格边框都源自同一变量：默认是
--bs-border-color（值为#dee2e6） - 改这个变量，
th、td、thead、tbody全部同步响应
全局修改：在 :root 或自定义 CSS 中重设 --bs-border-color
适合全站统一换色，比如换成深灰边框：
:root {
--bs-border-color: #495057;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 这个变量也影响
.form-control、.card、.dropdown-divider等其他组件，不是表格专属 - 如果用了
data-bs-theme="dark"，需同时在[data-bs-theme="dark"]下重设该变量，否则暗色模式下边框可能太浅看不清
局部修改：新增类并精准作用于表格结构
只想改某几个表格？别动全局变量。加一个自定义类，例如 .table-bordered-emerald：
.table-bordered-emerald th,
.table-bordered-emerald td,
.table-bordered-emerald thead th {
border-color: #0d9488 !important;
}
关键点：
- 必须同时写
th、td和thead th——Bootstrap 对表头单独加了样式权重 - 加
!important是为了压过.table-bordered原生规则（它本身没用!important，但选择器足够长） - 不要只写
.table-bordered-emerald td，否则表头边框还是默认色
加粗边框 + 自定义颜色的组合写法
Bootstrap 没提供 .table-bordered-2 这种类，但你可以自己补：
.table-bordered-thick {
border-width: 2px;
}
.table-bordered-thick th,
.table-bordered-thick td {
border-width: 2px;
border-color: #dc2626;
}
这里容易踩坑：
-
border-collapse: collapse仍生效，但相邻单元格的 2px 边框会「视觉叠加」，实际看起来像 3px 粗细 - 如果表格嵌套在
.table-responsive容器里，加粗后可能触发横向滚动条（尤其小屏），建议加媒体查询限制：@media (min-width: 768px) { ... } - 加粗后，
th的背景色若太浅（比如bg-light），文字可读性会下降，得同步调深背景或文字色
最常被忽略的细节：改完边框色后，务必检查 thead th 在不同背景（.table-dark、.table-striped）下的对比度——它不会自动适配，得手动加对应规则。比如 .table-dark .table-bordered-emerald th 要另写一遍颜色。
