badge圆角由border-radius控制，bootstrap 5默认0.375rem；正方形设0，胶囊形设9999px或足够大值，需保证高度充足且内容不换行；推荐用自定义class、作用域样式或属性选择器安全覆盖，避免!important。
Badge 的圆角由 border-radius 控制，直接覆盖即可
Bootstrap 的 .badge 默认使用 border-radius: 0.375rem（即 6px），它既不是正方形也不是胶囊形。想改，核心就是重写这个 CSS 属性——不需要改源码、不依赖 JS，纯 CSS 覆盖最稳妥。
注意：Bootstrap 5+ 的 badge 是内联元素（display: inline-flex），所以 border-radius 会同时作用于上下左右四个角，修改时要统一考虑四角一致性。
- 正方形 badge：设
border-radius: 0 - 胶囊型（两端半圆、中间直边）：设
border-radius: 9999px或足够大的值（如1rem），前提是高度足够、内容不换行 - 若用 SCSS，可复用 Bootstrap 的
$border-radius变量，比如border-radius: $border-radius-sm来对齐其他组件
如何在项目中安全覆盖而不影响全局
直接写 .badge { border-radius: 0 } 会污染所有 badge，实际项目里往往只需要局部调整。推荐以下三种方式，按优先级排序：
- 加自定义 class：比如
<span class="badge bg-primary rounded-0">New</span>—— Bootstrap 自带rounded-0工具类，开箱即用 - 作用域内覆盖：在 Vue/React 组件的 scoped style 或 CSS Module 中写
.my-badge { border-radius: 9999px }，再给 badge 加该 class - 用属性选择器限定：比如只改导航栏里的 badge：
.navbar .badge { border-radius: 0.25rem }
避免用 !important——它会让后续维护变困难，尤其当团队共用样式时。
胶囊型 badge 容易被忽略的两个限制条件
看起来只要把 border-radius 设大就能变胶囊，但实际生效依赖两个隐性前提：
- 元素必须有足够高度支撑“半圆”：如果文字过小或 padding 不足（比如
py-0），圆角会被压缩变形，甚至看不出弧度。建议至少保留py-1或手动设min-height: 1.5em - 内容不能换行：一旦文本过长触发折行，
border-radius会失效（flex 容器中多行会破坏圆角包裹效果）。可用white-space: nowrap+overflow: hidden强制单行 - 若用
bg-transparent等无背景色 badge，圆角视觉效果会弱化，需搭配边框（border）才明显
Bootstrap 4 和 5 的差异点必须核对
Bootstrap 4 的 badge 是 display: inline-block，而 Bootstrap 5 改为 display: inline-flex。这意味着：
- BS4 下设
border-radius: 9999px有时会在某些浏览器里出现顶部/底部轻微锯齿（flex 渲染差异），BS5 更稳定 - BS4 的
.badge-pill类专用于胶囊型，BS5 已移除该类，统一用rounded-pill工具类替代 - 如果你还在用 BS4，别漏掉
.badge-pill；迁移到 BS5 后，记得替换成rounded-pill
检查当前版本最简单的方式是打开浏览器开发者工具，看 badge 元素 computed 样式里 display 值和是否有 rounded-pill 类存在。
