要修改 list-group-item.active 的边框样式，须覆盖其 border-color 并确保优先级高于 Bootstrap 原规则；需同步设置 border-width 和 border-style 才能完全自定义；注意圆角继承与原生边框叠加导致的双线问题。
修改 list-group-item.active 的边框样式
bootstrap 默认给激活项加了 border-color: #0d6efd（v5.3），但这个边框是「叠加在 item 原有边框上」的，不是替换——所以直接改 border 可能没效果，或者出现双线。
- 必须覆盖
.list-group-item.active的border-color，且优先级要高于 Bootstrap 原生规则（比如加!important或用更具体的选择器） - 如果想完全自定义边框（比如圆角、虚线、粗细），得同时重置
border-width和border-style，否则可能只变颜色，其他沿用默认值 - v5 默认 item 本身就有
border-bottom: 1px solid rgba(0,0,0,.125)，激活项的边框会和它共存，容易显得杂乱
用 CSS 覆盖时的关键选择器写法
直接写 .list-group-item.active { border: 2px solid #dc3545; } 很可能不生效，因为 Bootstrap 的原始规则带 :not(.list-group-item-action) 等组合逻辑，优先级更高。
- 推荐用更具体的选择器：
.list-group .list-group-item.active或.list-group-item.list-group-item-action.active - 如果用了
data-bs-toggle="list"的 JS 激活方式，确保样式表加载在 Bootstrap CSS 之后 - 避免用
!important—— 它能解决问题，但会让后续维护变困难；真要用，只加在border-color上，别全塞进去
边框与圆角冲突的典型表现
Bootstrap v5 的 .list-group-item 默认有 border-radius: 0.375rem，但激活项的边框会「溢出」圆角区域，尤其当边框加粗后，顶部/底部看起来像被截了一块。
- 解决方法：给
.list-group-item.active显式设置border-radius: 0.375rem（和父 item 一致） - 如果列表组是垂直堆叠的，还要注意
border-top-left-radius/border-top-right-radius只该出现在第一个激活项，border-bottom-left-radius/border-bottom-right-radius只该出现在最后一个——但纯 CSS 很难精准控制，建议用 JS 动态加类或改用.list-group-flush配合自定义边框 - 不要依赖
overflow: hidden去裁剪，这会影响阴影、伪元素等其他视觉效果
用 Sass 变量提前定制（适合项目级统一改）
如果你用的是 Bootstrap 源码编译（比如通过 Sass 引入），最干净的方式是改变量，而不是后期覆盖 CSS。
- 重定义
$list-group-active-color（文字色）、$list-group-active-bg（背景）、$list-group-active-border-color（边框色） -
$list-group-active-border-color默认就是$primary，改它就能一并影响所有激活项边框 - 注意：v5.3 中
$list-group-active-border-color并未控制边框宽度或样式，所以仍需额外补一句border: $list-group-border-width solid $list-group-active-border-color;到自定义样式里
边框改动看着小，但实际牵扯到列表项的层级关系、圆角继承、伪类状态叠加，最容易被忽略的是「原生边框未被清除」导致的双线问题——调样式前先用浏览器开发者工具勾掉 border-color 看看原始结构，比瞎试快得多。
