Bootstrap 5的rounded类提供语义化圆角控制，基础类rounded设4px圆角，后缀-0至-3、pill、circle适配不同需求；定向圆角需用rounded-top等方向类；自定义值须用!important覆盖；图片容器需overflow-hidden防溢出；flex/grid中子项可能覆盖圆角。
用 rounded 类控制圆角大小最直接
Bootstrap 5 内置了一套语义化的圆角工具类，不用写 CSS 就能快速生效。rounded 是基础类，加在元素上默认应用 border-radius: 0.25rem（即 4px）。想调大或调小，直接追加后缀：rounded-0（0px）、rounded-1 到 rounded-3（对应 0.25–1.5rem），还有 rounded-pill（超大圆角，接近胶囊形）和 rounded-circle（完全圆形）。
常见误用是以为 rounded 单独就能适配所有场景——其实它只作用于所有边；如果只想圆某几个角，得用方向性类：
-
rounded-top：仅上边两个角 -
rounded-start（不是left，注意 RTL 兼容） -
rounded-bottom、rounded-end - 组合写法如
rounded-top rounded-end也合法
自定义圆角值必须覆盖 Bootstrap 的 CSS 变量或重写规则
内置类不够用？比如要 12px 或 2px 这种非标准值，不能靠拼类名解决。Bootstrap 5 使用 CSS 自定义变量管理圆角：--bs-border-radius 等。如果你在 :root 或组件级 scope 里修改它，会影响所有用到 rounded 的地方，副作用大。
更稳妥的做法是单独写一个类：
.rounded-12px {
border-radius: 12px !important;
}
注意加 !important——因为 Bootstrap 的 rounded-* 类带 !important，不加会导致样式被覆盖。另外，别在 Sass 中盲目调 $border-radius 变量后全量重建，除非你真要统一改整站圆角尺度。
图片、按钮、卡片圆角要注意 overflow: hidden 和边界裁剪
给 <img alt="怎么用Bootstrap设置圆角边框" > 加 rounded-2 没问题，但若图片是子元素（比如放在 <div class="card"> 里），只给父容器加圆角，图片会溢出——因为 <code>border-radius 不自动裁剪内容。
必须确保父容器有 overflow: hidden 才能真正“切掉”直角部分。Bootstrap 的 card、btn 等组件内部已处理这点，但自定义容器要自己补：
- 卡片内图片：给
<div class="card"> 加 <code>rounded类即可（它自带overflow: hidden） - 纯
<div> 包图片：需同时加 <code>rounded+overflow-hidden（Bootstrap 5 提供该工具类） - 按钮文字溢出：
btn类已设overflow: visible，所以rounded对文字无影响，但对图标或伪元素可能需要额外微调 - 子项是否设置了
margin把圆角区域顶出去了 - 子项是否有自己的
border或background延伸到容器边缘 - 是否漏了
overflow: hidden（尤其在 flex 容器上容易忽略）
border-radius 在 flex / grid 容器中可能被子项撑平
当圆角容器内使用 display: flex 或 grid，且子项设置了 margin 或 flex-grow，有时视觉上圆角“消失”了——实际是子项背景色盖住了圆角区域，或者子项的 border 覆盖了父容器的圆角边缘。
典型表现是：父容器明明有 rounded-3，但右下角看起来是直的。这时候要检查：
最简单的验证方式：临时给父容器加 outline: 2px solid red，看圆角轮廓是否还在。轮廓在但视觉没效果，基本就是子项覆盖问题。
