最省事的方式是直接修改css变量--bs-border-color，它统一控制.table-bordered、.form-control、.card等组件的边框颜色；需在自定义css中用:root重设该变量，并为深色模式额外声明[data-bs-theme="dark"]下的值。
直接改 --bs-border-color 变量最省事
Bootstrap 5.3+ 的边框颜色（包括 .table-bordered、.accordion-item、.form-control、.card 等）默认都继承自 CSS 变量 --bs-border-color，值为 #dee2e6。改它，所有用到该变量的组件边框会同步变色，不用逐个类去覆盖。
只需在你的自定义 CSS 中（确保在 Bootstrap 样式之后加载）写：
:root {
--bs-border-color: #495057;
}
注意两点：
-
--bs-border-color不是表格专属，它也影响表单控件、卡片、下拉分隔线等——改之前确认这是你想要的全局效果 - 如果项目启用了深色模式（
data-bs-theme="dark"），必须额外加媒体查询或属性选择器，否则暗色下边框可能太浅：[data-bs-theme="dark"] { --bs-border-color: #343a40; }
.border-* 工具类不起作用？缺颜色类是主因
像 border-2、border-3 这类工具类只设置宽度，不设颜色。浏览器会按 border-color: currentcolor 渲染，而 currentcolor 默认是透明或继承文字色，所以看起来“没边框”。
正确组合方式是宽度 + 颜色类，例如：
-
border-2 border-primary（蓝边，2px 宽） -
border-3 border-danger（红边，3px 宽） -
border border-dark（黑边，1px 宽，border默认就是 1px）
别指望 border-danger 自动适配 border-3：Bootstrap 的颜色类（如 border-success）固定用 1px，宽度必须显式叠加。
聚焦态和状态类的边框经常被忽略
给 .form-control 换边框色，只改默认态远远不够。:focus、.is-invalid、.is-valid 各自带独立 border-color 声明，且优先级高于普通类。
必须一并覆盖：
-
.my-input（默认态） -
.my-input:focus（聚焦时，同时要处理box-shadow，否则发光效果错位） -
.my-input.is-invalid和.my-input.is-valid（校验态）
尤其注意：.form-control:focus 的默认阴影含两层，其中一层是透明补偿边框加粗，若只换颜色不重写整条 box-shadow，视觉上可能突然“变粗”。
为什么加了样式却没反应？大概率卡在这三处
边框改不生效，八成不是代码写错，而是上下文干扰：
- 你的 CSS 在 Bootstrap 样式之前加载，被覆盖了——把
<link rel="stylesheet">放前面，自定义 CSS 放后面；或用media="all"确保加载顺序 - 组件自身带内联样式或高权重规则，比如
.alert或.badge显式写了border: 1px solid，border-2权重不够，得加!important或先重置border: 0 - 用了 JS 动态插入的组件（如 Popover、Tooltip），它们的 DOM 是运行时生成的，class 必须通过
container选项挂载到有样式的父容器里，否则自定义类压根没生效位置
CSS 变量虽好，但一旦混用 Sass 编译、CDN 引入、动态主题切换，--bs-border-color 的实际取值可能来自多个源头，调试时务必在 DevTools 的 Computed 面板里点开 border-color，看它最终从哪个变量或规则继承而来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
