Bootstrap 5徽章默认支持rounded类，但需注意其内置border-radius: 0.375rem可被.rounded-*覆盖；常见失效因!important干扰、旧版CSS或父元素overflow:hidden。
Bootstrap 5徽章默认不支持rounded类？
不是不支持，而是.badge本身已内置border-radius: 0.375rem（即6px），但这个值会被后续的.rounded-*<code>类覆盖——前提是这些类被正确应用且未被更高优先级样式压制。很多开发者试了<code>rounded-pill没反应，其实是被自定义CSS或Bootstrap的!important规则干扰了。
直接覆盖border-radius的三种可靠方式
优先级从高到低排列，按需选择：
- 在元素上内联写：
style="border-radius: 12px !important;"（适合单次调试，不推荐长期用） - 写自定义类并提高选择器权重：
.badge-custom { border-radius: 12px !important; }然后加到徽章上：<span class="badge bg-primary badge-custom">New</span> - 利用Bootstrap 5的
rounded工具类组合：rounded-1（0.25rem）、rounded-2（0.5rem）、rounded-3（0.75rem）、rounded-pill（50%），例如：<span class="badge bg-success rounded-pill">Success</span>
为什么rounded-pill有时失效？
常见原因有三个：
- 你的项目加载了旧版Bootstrap CSS（v4或更早），
rounded-pill是v5新增的 - 徽章用了
bg-*<code>类但同时又写了<code>border相关样式，导致border-radius被重置（比如某些主题CSS会强制border-radius: 0） - 徽章嵌套在
button或a里，而父元素设置了overflow: hidden，视觉上“切掉”了圆角
想统一改所有徽章的圆角？别动源码，用CSS变量
Bootstrap 5支持通过CSS变量自定义基础尺寸。在:root或body后追加：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-border-radius: 0.5rem; /* 影响所有用到 border-radius 的组件，包括 badge */
}或者只针对徽章：
.badge {
border-radius: 0.5rem !important;
}注意：如果项目中用了bootstrap.min.css且未开启CSS变量支持（如未引入bootstrap/scss/functions等），变量方式可能无效——这时老老实实用!important覆盖更稳妥。
