直接给.btn-group加border-radius无效，因其为flex容器且Bootstrap重置了子按钮圆角；首尾按钮圆角需按方向用.rounded-start/.rounded-end（水平）或.rounded-top/.rounded-bottom（垂直）；嵌套滚动容器中圆角被裁剪是因负外边距超出父容器，应确保.row置于.container内；.rounded-pill不生效是因被子按钮样式覆盖且需配合text-nowrap和min-width。
直接给 .btn-group 加 border-radius 无效
因为 .btn-group 是 flex 容器，而 Bootstrap 显式重置了内部每个 .btn 的圆角：中间按钮的左右圆角被设为 0，首尾按钮的对应角也被分别控制。你给容器加 border-radius，CSS 不会继承，也不会影响子元素的盒模型边界——结果就是容器外框可能有圆角，但按钮拼接处仍是直角，视觉断裂。
.btn-group 里首尾按钮圆角没生效
常见错误是只写 border-radius: 0.375rem，这会同时作用于上下左右，在垂直按钮组（.btn-group-vertical）里导致圆角错位到左上/右上，而非顶部/底部。正确做法是按方向区分：
- 水平组：用
.rounded-start加在第一个按钮，.rounded-end加在最后一个 - 垂直组：用
.rounded-top和.rounded-bottom，别混用start/end - 若手写 CSS，必须提高选择器权重，例如
.btn-group > .btn:first-child，而不是.btn:first-child
按钮组嵌套在滚动容器中圆角“消失”
这不是圆角没生效，而是被裁剪了。当 .btn-group（或其父级 .row）直接放在 overflow-y: scroll 容器里时，Bootstrap 的负外边距（如 .row 的 margin-left: -15px）会超出父容器边界，被 overflow 严格裁掉——恰好切掉按钮左右两端的圆角。
修复方式很简单：确保 .row 始终包裹在 .container 或 .container-fluid 内，由容器的 padding 吞掉负边距，避免裁剪。
立即学习“前端免费学习笔记（深入）”；
用了 .rounded-pill 却没变胶囊形
这个类只作用于它所在的元素本身，不会传导给子按钮。更关键的是，.btn-group > .btn:not(:first-child) 等规则会强制清空中间按钮的圆角，覆盖你的 .rounded-pill。另外，胶囊形需要足够高度和宽度支撑：
- 必须搭配
text-nowrap防文字换行 - 建议加
min-width: 6rem避免按钮塌陷 - 不要给同一个按钮同时加
.rounded-start和.rounded-pill——后者优先级更高，前者会被忽略
最易被忽略的点：圆角是否生效，不只看 CSS 是否写了，更要看它是否被更高权重的选择器覆盖、是否被父容器溢出裁剪、以及是否在正确的方向上设置了对应角。调试时优先检查 computed styles 里的 border-top-left-radius 等具体属性值，而不是只看 class 列表。
