Accordion边框实际是浅灰色（#dee2e6），非蓝色；所谓“蓝色”多因--bs-border-color被覆盖或误加border-primary类所致，应通过DevTools检查.accordion-item的border-top-color确认真实值。
Accordion边框颜色不是蓝色，但看起来像蓝？先确认真实来源
Bootstrap 5.3+ 的 .accordion-item 默认边框色是 --bs-border-color 变量值（#dee2e6，浅灰），不是蓝色。你看到的“蓝色边框”，大概率是以下之一：
— 项目里已覆盖了 --bs-border-color 变量；
— 某个 .accordion-item 被误加了 border-primary 类；
— DevTools 里看错了计算样式，实际渲染的是 .accordion-button 的 border-bottom: none 上方残留线或父容器边框。
用浏览器检查器点开 .accordion-item → Computed → border-top-color，看真实值是多少，别凭感觉调。
只改Accordion边框，不碰全局：精准覆盖 .accordion-item
想单独改 Accordion 边框，别动 --bs-border-color——它会影响表格、表单、卡片等所有组件。稳妥做法是直接作用于 .accordion-item，但必须带全边框三要素：
— border-color（你要的颜色）
— border-width: 1px（Bootstrap 默认值，漏了会变虚线或消失）
— border-style: solid（漏了可能显示为 none）
同时提高选择器权重，避免被 Bootstrap 原生规则压掉：
.my-accordion .accordion-item {
border-color: #28a745;
border-width: 1px;
border-style: solid;
}
然后在 HTML 外层加 class="my-accordion"，否则样式不生效。
标题背景色随展开/折叠动态切换：靠 .collapsed 类判断状态
Accordion 标题背景不能靠 hover 或静态 class，必须依赖 Bootstrap 自动切换的 .collapsed 类：
— 折叠时，.accordion-button 有 .collapsed；
— 展开时，这个类被移除。
所以样式要这么写：
.my-accordion .accordion-button.collapsed {
background-color: #f8f9fa;
color: #212529;
}
.my-accordion .accordion-button:not(.collapsed) {
background-color: #0d6efd;
color: #fff;
}
注意两点：
— .accordion-button 默认有 border-bottom: none，它会遮住 .accordion-item 的 border-bottom，调背景前先确认视觉层级没被盖住；
— 如果改了文字色但图标也跟着变（比如箭头发白不可见），说明你用了 color 直接继承，该换用 --bs-accordion-btn-icon-color 单独控图标色。
深色模式、嵌套、加载顺序：三个最常导致“改了没反应”的地方
边框和背景样式失效，八成卡在这三点：
— 深色模式下，[data-bs-theme="dark"] 会重置部分变量，但你的自定义 CSS 没配对应块，导致暗色下边框变浅或背景反色；
— 多个 Accordion 嵌套时，data-bs-parent 可能让外层容器设了 overflow: hidden，把边框裁掉了；
— CSS 文件引入顺序错了：你的自定义样式必须在 Bootstrap CSS 之后加载，否则直接被覆盖——检查 HTML 中 <link> 标签顺序。
这些地方不排查完，光改颜色值毫无意义。
