怎么用Bootstrap设置圆角边框-Bootstrap教程-PHP中文网

Bootstrap 5的rounded类提供语义化圆角控制，基础类rounded设4px圆角，后缀-0至-3、pill、circle适配不同需求；定向圆角需用rounded-top等方向类；自定义值须用!important覆盖；图片容器需overflow-hidden防溢出；flex/grid中子项可能覆盖圆角。

怎么用bootstrap设置圆角边框

用 `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 变量后全量重建，除非你真要统一改整站圆角尺度。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

图片、按钮、卡片圆角要注意 `overflow: hidden` 和边界裁剪

给加 rounded-2 没问题，但若图片是子元素（比如放在

 里），只给父容器加圆角，图片会溢出——因为 border-radius 不自动裁剪内容。必须确保父容器有 overflow: hidden 才能真正“切掉”直角部分。Bootstrap 的 card、btn 等组件内部已处理这点，但自定义容器要自己补：
卡片内图片：给  加 rounded 类即可（它自带 overflow: hidden）
纯  包图片：需同时加 rounded + overflow-hidden（Bootstrap 5 提供该工具类）
按钮文字溢出：btn 类已设 overflow: visible，所以 rounded 对文字无影响，但对图标或伪元素可能需要额外微调


border-radius 在 flex / grid 容器中可能被子项撑平
当圆角容器内使用 display: flex 或 grid，且子项设置了 margin 或 flex-grow，有时视觉上圆角“消失”了——实际是子项背景色盖住了圆角区域，或者子项的 border 覆盖了父容器的圆角边缘。
典型表现是：父容器明明有 rounded-3，但右下角看起来是直的。这时候要检查：

子项是否设置了 margin 把圆角区域顶出去了
子项是否有自己的 border 或 background 延伸到容器边缘
是否漏了 overflow: hidden（尤其在 flex 容器上容易忽略）

最简单的验证方式：临时给父容器加 outline: 2px solid red，看圆角轮廓是否还在。轮廓在但视觉没效果，基本就是子项覆盖问题。