accordion边框颜色由css的border-color属性控制，具体作用于.accordion-item元素的border-top和border-bottom；默认值来自--bs-border-color变量（#dee2e6），非蓝色，若显蓝色则因变量被覆盖或应用了border-primary类。
Accordion边框颜色由哪个CSS属性控制
Accordion的边框不是按钮或内容区域的样式，而是.accordion-item元素的border-top和border-bottom——它默认只在这两个方向画线，左右边框是透明的。所以你看到的“蓝色边框”，其实是border-color继承自Bootstrap的--bs-border-color变量（v5.3+）或Sass变量$accordion-border-color，值为#dee2e6（浅灰），不是蓝色；真出现蓝色，大概率是你项目里已覆盖过--bs-border-color或用了border-primary类。
直接改--bs-border-color变量最省事
如果你希望所有用到边框的地方（表格、表单、卡片、Accordion）统一换色，改这个变量就行：
:root {
--bs-border-color: #495057;
}
注意两点：
- 这个变量必须写在 Bootstrap CSS 之后加载的自定义样式中，否则会被覆盖
- 如果启用了深色模式（
data-bs-theme="dark"），记得补上：
[data-bs-theme="dark"] {
--bs-border-color: #343a40;
}
只改Accordion边框，不碰全局
更稳妥的做法是精准作用于.accordion-item：
- 别只写
border-color，必须同步声明border-width: 1px和border-style: solid，否则可能断线或变虚 - 增强选择器权重，避免被Bootstrap原生规则压掉，比如：
.my-accordion .accordion-item - 确保外层容器有
class="my-accordion"，否则样式不生效
示例：
.my-accordion .accordion-item {
border-color: #28a745;
border-width: 1px;
border-style: solid;
}
为什么改了没反应？常见卡点
边框“消失”或颜色不变，八成是下面这些原因：
-
.accordion-button自带border-bottom: none，视觉上盖住了.accordion-item的border-bottom——打开DevTools检查Computed样式，确认border到底是谁渲染的 - 多个Accordion嵌套时，
data-bs-parent可能导致外层容器overflow: hidden，把边框裁掉了 - CSS文件加载顺序错：你的自定义样式在Bootstrap之前引入，直接被覆盖
- 深色模式下媒体查询重置了颜色，但你没配
@media (prefers-color-scheme: dark)
边框这事看着简单，但实际牵扯到继承链、选择器权重、响应式上下文和DOM结构，调一次不生效，基本不是变量写错了，而是其中一环没对上。
