Bootstrap 5 中 rounded 类通过预设 border-radius 值控制图片圆角，其中 rounded 默认 0.25rem、rounded-0 为直角、rounded-1~rounded-3 递增至 1rem，rounded-circle 需宽高相等才显正圆，rounded-pill 呈胶囊形。
Bootstrap 5 中直接用 rounded 类控制图片圆角
bootstrap 5 默认移除了 img-rounded 这类旧版类名，统一用 rounded 系列工具类。给图片加圆角，本质是设置 border-radius，不需要写 css 或额外 class。
-
rounded：默认圆角（0.25rem，约 4px） -
rounded-0：完全无圆角（0） -
rounded-1~rounded-3：递增圆角（0.25rem→1rem） -
rounded-circle：设为50%，适合头像等正方形图 -
rounded-pill：超大圆角（50rem），左右呈胶囊形
示例：
@@##@@
想加边框？得单独加 border 类或自定义
Bootstrap 的 rounded 类只管圆角，不带边框。要同时有圆角 + 边框，必须显式添加边框类：
-
border：默认 1px 实线，颜色继承 text color（通常是深灰） -
border-primary/border-danger等：带主题色的边框 -
border-2：加粗到 2px（Bootstrap 5 支持border-{1,2,3,4,5}） - 若需细粒度控制（如虚线、透明边框），建议直接写内联 style 或自定义 class
常见组合：
@@##@@
图片不是响应式？img-fluid 别漏掉
如果图片在小屏上溢出容器或失比例，大概率是因为没加 img-fluid。这个类设了 max-width: 100% 和 height: auto，是响应式前提。
- 圆角 + 边框 + 响应式 =
class="img-fluid rounded border" - 单独用
rounded而不加img-fluid，在窄屏下可能圆角被裁切（因图片超出父容器） - 若图片是背景图，别用
<img src="avatar.jpg" class="rounded-2">标签，应改用div+background-image+rounded
IE 或老版本 Bootstrap 兼容问题怎么处理
Bootstrap 4 也支持 rounded，但 Bootstrap 3 没有——它用的是 img-rounded（已废弃）。如果你还在维护 Bootstrap 3 项目：
- 不要强行套用
rounded，它不会生效 - 要么升级到 Bootstrap 4+，要么手动加 style：
style="border-radius: 0.25rem;" - IE 11 对
border-radius支持完好，但若用了object-fit: cover配合圆角，IE 不支持，会露出直角
圆角和边框本身不复杂，但容易忽略「响应式基础」和「版本错配」这两个点——加了 rounded 却没加 img-fluid，或者在 Bootstrap 3 里抄了 5 的文档，是最常卡住的地方。
