Bootstrap 5 中彻底去掉按钮默认圆角的正确方法是使用内置工具类 rounded-0，需与 btn 类共存（如 class="btn btn-primary rounded-0"），它优先级高、兼容所有尺寸类，且能覆盖默认的 0.375rem 圆角。
Bootstrap 按钮默认圆角怎么彻底去掉
Bootstrap 5 默认给 btn 类加了 border-radius: 0.375rem，想完全直角，不能只靠覆盖 CSS，得用对内置工具类。直接写 style="border-radius: 0" 虽然能生效，但破坏一致性、难维护，还可能被其他样式干扰。
正确做法是使用 Bootstrap 官方提供的重置类：rounded-0。它作用于所有边框角，且优先级足够高，能覆盖 btn 自带的圆角。
-
rounded-0必须和btn同时出现在 class 中，顺序无关（如class="btn btn-primary rounded-0"） - 如果按钮还用了
btn-sm或btn-lg，rounded-0依然有效，无需额外处理 - 注意不要误用成
rounded-none（这是 Tailwind 的写法，Bootstrap 不识别）
为什么加了 rounded-0 还有残余圆角
常见原因是父容器或自定义样式强制设置了 border-radius，比如外层 input-group、btn-group，或者你自己写的 CSS 规则里用了 !important。
排查步骤：
- 打开浏览器开发者工具，选中按钮，看
Computed面板里border-radius的最终值来源 - 检查是否意外套了
btn-group—— 它会给首尾按钮分别加rounded-start和rounded-end，此时单加rounded-0不够，得额外加rounded-start-0 rounded-end-0 - 确认没在全局 CSS 里用
.btn { border-radius: ... !important }这类强覆盖
rounded-0 在不同版本 Bootstrap 中是否通用
仅 Bootstrap 5+ 支持 rounded-0。Bootstrap 4 的等效写法是 rounded-0 吗？不是 —— BS4 用的是 rounded-0（名称一样），但底层单位是 0 像素而非 0rem，实际效果一致。不过 BS4 的 rounded-0 默认不包含在所有构建中，某些精简版 CSS 可能漏掉它。
- BS5：开箱即用，推荐
- BS4：确保你用的是完整版
bootstrap.min.css，而非自定义构建；若失效，可临时补一句.rounded-0 { border-radius: 0 !important; } - BS3 及更早：不支持该类名，必须手动写 CSS 或升级
按钮直角后要注意的视觉细节
去掉圆角不只是样式变化，还会暴露一些平时被圆角“藏起来”的问题：
- 多个直角按钮并排时，相邻边框会“重叠”或出现 2px 线条，建议加
btn-group或用gap控制间距 - 按钮内图标（如
svg或i）如果本身带 padding/margin，直角下更容易显得不对齐，建议统一用btn-icon类或重置子元素vertical-align - 暗色主题下，直角边缘在高对比度屏幕中更刺眼，可考虑微调
border-color让过渡柔和一点
直角按钮看似简单，但真正干净地落地，得同时盯住类名有效性、父级干扰、版本兼容和视觉连贯性 —— 少一个环节，就容易在某个页面突然“冒圆角”。
