bootstrap 5 按钮边框粗细无法通过内置工具类直接修改，因 .btn 类固定 border-width: 1px 且权重高；需用自定义类（如 .btn-border-2）配合 !important 覆盖，或先加 .border-0 再叠加 .border-2。
Bootstrap 5 按钮边框粗细不能直接用 .btn 类控制
Bootstrap 5 的按钮边框粗细是写死在 CSS 变量里的，没有提供类似 .border-2 这样的工具类直接作用于 .btn。所有内置按钮（包括 .btn-primary、.btn-outline-success 等）的边框宽度都由其基础样式决定：.btn 自带 border-width: 1px，而 .btn-outline-* 类也复用该值，不会额外放大或缩小。
常见错误现象：给按钮加 class="btn btn-primary border-3" —— 没效果。因为 .border-3 是通用边框工具类，它只对 border-style 为 solid 且未被其他规则覆盖的元素生效；而 .btn 的 border-style 是 solid，但它的 border-width 被更具体的规则（如 .btn { border-width: 1px; }）锁死了，.border-3 的权重不够覆盖。
- 想改粗细，必须用自定义 CSS 覆盖
border-width - 别试图用多个
.border-*类叠加，它们互斥，后写的会覆盖前写的 -
.btn-outline-*按钮的边框颜色和粗细是一体设定的，改粗细不影响颜色逻辑
手动覆盖 border-width 的安全写法
最稳妥的方式是定义一个新类（比如 .btn-border-2），显式设置 border-width，并确保它能压过 Bootstrap 原生规则。关键是提高选择器权重，同时保留按钮原有 padding、圆角和交互行为。
推荐写法：
.btn-border-2 {
border-width: 2px !important;
}
为什么加 !important？因为 Bootstrap 的 .btn 规则里 border-width 是直接声明在元素级选择器上的（如 .btn { border-width: 1px; }），不加 !important 很难在普通类中胜出。这不是最佳实践，但在按钮这类高度封装的组件上，它是最快、最可控的解法。
- 搭配
.btn使用：class="btn btn-primary btn-border-2" - 如果同时用
.btn-outline-*，记得检查 hover 状态下背景填充是否还匹配新边框——默认.btn-outline-*的 hover 是填色，边框仍为 2px，视觉上没问题 - 避免用
border: 2px solid #007bff全写，会覆盖掉原生的border-color动态逻辑（比如.btn-outline-dark在深色主题下自动适配）
响应式边框粗细要慎重
不要为不同断点写 @media 改 border-width。边框粗细不是响应式设计的关注点——1px 在手机和桌面都清晰，2px 在小按钮上反而显得笨重，甚至挤占文字空间。
真正需要响应式处理的是按钮尺寸（.btn-sm/.btn-lg）和容器约束，而不是边框本身。强行让边框在移动端变细（比如 0.5px），会遇到兼容性问题：Safari 旧版本会四舍五入成 1px，Chrome 和 Firefox 虽支持 subpixel，但渲染一致性差，且高 DPI 屏幕下可能模糊。
- 若真有视觉降噪需求，优先调低
border-color的透明度（如rgba(0,0,0,0.1)），比改粗细更安全 - 移动端慎用
border-width: 2px，尤其配合.btn-sm时，内边距可能撑不开，导致文字贴边 - 所有自定义边框类，建议统一加
box-sizing: border-box（虽然.btn默认已是，但以防万一）
用 border 工具类的前提是先清空原生边框
如果你坚持用 Bootstrap 自带的 .border-* 工具类（比如 .border-2），必须先移除 .btn 带来的原生边框，否则会出现双线边框。
做法是加 .border-0 清底，再叠加目标粗细：
<button type="button" class="btn btn-primary border-0 border-2">双线？不，是单线2px</button>
但注意：.border-2 只设宽度，不设样式和颜色，所以必须确保按钮已有 border-style（.btn 提供了 solid）和颜色（.btn-primary 提供了 border-color）。这个组合在大多数情况下可行，但不如自定义类稳定。
-
.border-0必须写在.border-2前面，否则会被覆盖 - 此法对
.btn-outline-*同样适用，但要注意.btn-outline-*的border-color是动态的，别用.border-dark这类固定色工具类去覆盖它 - 这种写法在 SSR 或构建时可能被 PurgeCSS 误删，如果项目开了 CSS tree-shaking，建议宁可多写几行自定义类
实际项目里，边框粗细调整属于边缘优化，90% 的场景保持默认 1px 最稳妥。真正容易被忽略的是：改完粗细后没同步检查禁用态（.disabled）下的边框灰度是否协调，以及 focus outline 是否还清晰可见——这两处的样式往往被连带影响，却很少被测试到。
