Bootstrap边框样式修改 Border圆角设置-Bootstrap教程-PHP中文网

直接修改 .form-control 的 border-radius 常失效，因 bootstrap 5 将圆角逻辑分散在 .form-control、.input-group > *、:focus 等多层级，且 form-floating 和 safari 私有样式等进一步干扰，需系统覆盖整条规则链并注意表格、图片等特殊场景。

bootstrap边框样式修改 border圆角设置

直接改 `.form-control` 的 `border-radius` 为什么经常失效？

因为 Bootstrap 5 把圆角逻辑拆到了多个层级：表单控件本身、.input-group 子元素、甚至伪类状态（如 :focus）都各自声明了 border-radius。只覆盖 .form-control，大概率被 .input-group > *:first-child 或 .form-control:focus 覆盖。

常见现象：border-radius 在普通态看着生效，一点击输入框就变直角；或者加了 rounded-pill 却只有右边圆、左边不圆。

用浏览器开发者工具检查「Computed」面板，看最终生效的 border-radius 来自哪条规则
优先覆盖整套链路：.form-control, .form-control:focus, .input-group > .form-control, .input-group > *:first-child, .input-group > *:last-child
如果用了 form-floating，还要额外处理 .form-floating > .form-control 和容器的 overflow 行为
Safari 对 input[type="search"] 有私有样式干预，需加 -webkit-appearance: none 才能真正接管圆角

`.table` 加 `border-radius` 没反应？不是 bug，是浏览器限制

表格元素（<table>、<code><tr>、<code><td>）在 <code>border-collapse: collapse 模式下，根本无法渲染 border-radius —— 这是所有现代浏览器的统一行为，不是 Bootstrap 的问题。

强行给 .table 设 border-radius: 6px，computed 样式里能看到值，但视觉上就是没圆角。

正确做法：用外层容器包裹，设 border-radius + overflow: hidden + 显式边框（否则圆角不可见）
必须把 border-collapse 改成 separate，或保留 collapse 但手动给 thead th:first-child 和 thead th:last-child 加 border-top-left-radius/border-top-right-radius
注意 .table 默认有 margin-bottom: 1rem，要清掉，否则容器圆角下方会漏白
移动端小屏下，th 文字换行可能导致高度突变，让顶部圆角错位，建议固定 line-height 或用 white-space: nowrap

想全局统一圆角大小，改变量还是覆盖 CSS？

取决于你是否控制构建流程。用 Sass 编译（Webpack/Vite + bootstrap/scss）时，改 $border-radius 变量最干净；只引 CDN 的 CSS，则只能靠后加载的自定义样式覆盖。

VPS Bootstrap

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

下载

但要注意：$border-radius 控制的是 .btn、.card、.alert 等组件，.form-control 用的是独立变量 $input-border-radius（v5.3+ 仍未绑定到 CSS 变量），所以改一个变量 ≠ 全局生效。

CDN 用户安全写法：.form-control, .btn, .card, .input-group > *, .alert { border-radius: 6px !important; }
别漏掉伪元素：如 .btn-close::before 也需单独设 border-radius
.btn-sm / .btn-lg 不继承不同圆角值，得显式写 .btn-sm { border-radius: 4px !important; }
避免用 !important 覆盖 rounded-pill —— 它的 border-radius: 50rem 已极大，再加大无意义，直接写像素值更可控