直接改 .btn-group 的圆角无效，是因为 Bootstrap 默认将内部按钮左右边框合并并设为 border-radius: 0，导致单个按钮加圆角无视觉效果；正确做法是覆盖所有按钮的 border-radius 并单独修复首尾按钮外侧圆角。
直接改 .btn-group 的圆角为什么无效？
因为 bootstrap 默认把 .btn-group 内部按钮的左右边框「合并」了（通过 border-radius: 0 强制抹平衔接处），所以即使你给单个 .btn 加 .rounded，或改 border-radius，视觉上依然看不出弧度——中间按钮的左右两侧被“削平”了。
正确做法：覆盖默认边框半径 + 控制首尾按钮
必须同时处理三件事：重置中间按钮的水平圆角、保留首尾按钮的外侧圆角、确保边框不塌陷。Bootstrap 5+ 默认用 border-collapse: separate（对按钮组不适用，但思路一致）——这里靠 CSS 覆盖：
- 给
.btn-group加overflow: hidden（可选，防溢出） - 重置所有按钮的
border-radius，例如：.btn-group > .btn { border-radius: 8px !important; } - 再单独修正首尾按钮的「外露角」：
.btn-group > .btn:first-child { border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; } .btn-group > .btn:last-child { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }
想全局统一修改？改 Sass 变量最省事
如果你用的是 Bootstrap 源码（Sass 版本），直接改 $border-radius 或 $border-radius-sm/$border-radius-lg 变量，所有组件（包括按钮组里的按钮）会自动同步更新。但注意：.btn-group 自身不响应这个变量，它只影响内部 .btn 的基础样式；所以仍需确保没其他规则（比如 .btn-group > .btn 的硬编码 border-radius: 0）把它又压回去。
容易踩的坑：!important 不是万能解药
很多同学加了 !important 还没效果，往往是因为：
- 选择器权重不够：比如用了
.btn.rounded，但 Bootstrap 的.btn-group > .btn规则更具体，必须同样写全路径 - 用了
border-collapse类（虽然按钮组不用这个，但有人会误套表格逻辑） - 在 Bootstrap 4 中，
.btn-group默认有border-radius: 0直接写死在按钮上，必须显式覆盖 - 自定义主题里重置了
$enable-rounded: false，导致所有.rounded*类被编译剔除
真正麻烦的不是怎么加圆角，而是搞清哪一层样式在“暗中作梗”。建议打开浏览器开发者工具，逐层检查 computed styles 里的 border-radius 值从哪来、被谁覆盖。
