直接修改 .modal-header 的 border-bottom-color 即可，因其默认仅底部有边框且受 --bs-border-color 控制；需注意 DOM 插入时机、选择器权重及 data-bs-theme="dark" 作用范围。
直接改 .modal-header 的 border-bottom-color 就行
Bootstrap 5 的 .modal-header 默认带一条 border-bottom（颜色来自 --bs-border-color），不是靠背景色“模拟”的边线。所以改边框线颜色最直白的方式就是覆盖它的 border-bottom-color，而不是动 background-color 或伪元素。
注意两点：一是这个边框默认只在底部（border-bottom），顶部/左右没有；二是它受暗色模式影响——如果页面启用了 data-bs-theme="dark"，--bs-border-color 会自动变浅，你设的硬色值可能被覆盖。
- 推荐写法：
.modal-header { border-bottom-color: #2c3e50; } - 若要兼顾暗色模式，加一层选择器：
[data-bs-theme="dark"] .modal-header { border-bottom-color: #4a5568; } - 别用
border: 1px solid #xxx全边框——会把左右和顶部也加上，破坏 Bootstrap 原有结构
为什么有时改了没生效？检查这三处
常见失效不是代码写错，而是被更高优先级规则压住，或根本没命中目标元素。
-
.modal-header在 Modal 弹出后才被 JS 插入 DOM，确保你的 CSS 文件加载在 Bootstrap 之后，或用!important临时验证（仅调试用） - 如果你给 Modal 加了自定义 class（如
my-modal），但 CSS 写成.my-modal .modal-header，而实际 DOM 结构是<div class="modal"><div class="modal-header">，那这个选择器就无效——.modal-header是.modal的子元素，不是.my-modal的后代 - 检查 DevTools 的 computed 样式里
border-bottom-color是否真的变了；如果还是默认色，大概率是 CSS 加载顺序或选择器权重问题
想彻底解耦样式？用 CSS 变量覆盖 --bs-border-color
Bootstrap 5.3+ 把边框色统一托管在 --bs-border-color 变量上，改它会影响所有组件（.card、.form-control、.table-bordered 等）。适合主题化统一换色，但要注意副作用。
- 全局改：
:root { --bs-border-color: #3498db; } - 局部改（只影响某个 Modal）：
.my-modal .modal-header { --bs-border-color: #9b59b6; }，再配合border-bottom-color: var(--bs-border-color); - 不推荐单独为
.modal-header新增变量——Bootstrap 没暴露--bs-modal-header-border-color，强行加反而增加维护成本
深色模式下边框线太淡？别硬调 color，先确认 theme 属性位置
Bootstrap 的暗色模式靠 data-bs-theme="dark" 触发，但它只作用于有该属性的祖先元素。如果 Modal 是动态挂到 <body> 下的（Bootstrap 默认行为），而 <body> 没设 data-bs-theme="dark"，那 .modal-header 就不会响应暗色变量。
- 正确做法：把
data-bs-theme="dark"放在<body>上，或 Modal 容器外层包裹元素上 - 验证方式：在 DevTools 里选中
.modal-header，看 computed 样式中border-bottom-color是否已变成深色系值 - 如果必须手动适配，用
[data-bs-theme="dark"] .modal-header覆盖比依赖prefers-color-scheme更可靠，因为后者不触发 Bootstrap 内部变量切换
.modal-header 边框线本质是改一个 CSS 属性，但真正容易卡住的是 DOM 插入时机、选择器匹配范围和暗色模式的传播路径——这些地方漏一点，样式就白写了。 
