直接修改 .form-control 的 border-color 不生效，因 Bootstrap 5 依赖 --bs-border-color 变量且被多状态伪类覆盖；需用 !important 覆盖所有状态，或修改 :root 变量，或在 Sass 中提前重定义 $form-control-border-color 变量。
直接改 .form-control 的 border-color 不生效？
bootstrap 5 默认用 border-color: var(--bs-border-color)，而这个 css 变量本身又被 :root 和 .form-control 自身的伪类（比如 :focus）反复覆盖。单纯在样式表里写 .form-control { border-color: #0d6efd; } 很可能被忽略，尤其在聚焦、禁用、悬停等状态下完全没反应。
推荐：用 !important + 覆盖所有状态
最稳妥的做法是显式覆盖所有关键状态，避免依赖变量链。以下规则能确保边框颜色稳定生效：
.form-control {
border-color: #0d6efd !important;
}
.form-control:focus {
border-color: #0d6efd !important;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 237, 0.25) !important;
}
.form-control:disabled,
.form-control[readonly] {
border-color: #adb5bd !important;
}
- 必须加
!important—— Bootstrap 的原生规则优先级高，不加容易被覆盖 -
:focus状态单独处理，否则点击后边框又变回默认蓝灰 - 禁用/只读状态建议设为浅灰（
#adb5bd），和 Bootstrap 默认视觉一致
想全局统一？改 :root 中的 --bs-border-color
如果项目中所有表单、卡片、分割线都要同步换边框色，可以一劳永逸修改根变量：
:root {
--bs-border-color: #0d6efd;
--bs-border-color-translucent: rgba(13, 110, 237, 0.15);
}
但注意：--bs-border-color 不仅影响 .form-control，还会影响 .card 边框、.dropdown-divider、.hr 等——改之前得确认是否真要全局联动。
自定义主题时别漏掉 $form-control-border-color Sass 变量
如果你用 Sass 编译 Bootstrap，最干净的方式是在引入前重定义变量：
$form-control-border-color: #0d6efd; $form-control-border-width: 1px; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/forms";
- 必须在
@import "variables"之前 设置变量，否则无效 - 同时设置
$form-control-border-width可避免某些版本因宽度计算异常导致边框“变粗” - 此方式不污染全局 CSS，适合中大型项目长期维护
边框颜色看着简单，但 Bootstrap 的变量嵌套和状态覆盖逻辑很容易让人改了半天只看到 :focus 时才变色——盯住状态、加 !important、或者从编译源头控制，三者选其一，别混着试。
