bootstrap 表单输入框圆角需通过css覆盖实现，因默认值写死且无配置开关；推荐用高优先级选择器如 .form-control { border-radius: 8px; } 或自定义类，注意 form-floating 容器需同步设圆角。
Bootstrap 表单输入框的圆角怎么改？直接覆盖 border-radius
Bootstrap 默认给 <input>、<textarea></textarea>、<select></select> 加了 border-radius: 0.375rem（v5.x），想自定义圆角，不是靠配置开关，而是靠 CSS 覆盖。别找什么“启用圆角选项”，它压根没提供 JS 或 data 属性来控制这个。
常见错误是试图用 form-control-lg 或 form-control-sm 间接影响——它们只调尺寸和内边距，不碰 border-radius。
- 最稳妥方式：在自己的 CSS 文件里写更高优先级的选择器，比如
.form-control { border-radius: 8px !important; } - 如果只改某一个输入框，加自定义 class 更干净：
<input class="form-control rounded-custom">，再配.rounded-custom { border-radius: 12px; } - 注意不要漏掉伪元素：某些 Bootstrap 版本（尤其配合
form-floating）里，label或::placeholder可能视觉上“遮住”圆角效果，实际边框已生效，得检查 computed styles 确认
为什么 !important 有时绕不开？
Bootstrap v5 的 .form-control 规则带 !important（例如在 box-shadow 或 border 上），虽然 border-radius 本身没加，但如果你用的是第三方主题、CDN 加载顺序混乱，或用了 bootstrap.min.css 后又引入其他 UI 库，就可能触发层叠冲突。
- 优先检查加载顺序：你的自定义 CSS 必须在 Bootstrap CSS 之后加载
- 提升选择器权重比
!important更可持续，比如用.my-form .form-control替代单纯.form-control - 真要用
!important，只加在border-radius这一项上，避免污染整条规则
不同版本的 border-radius 值差异
v4.6 是 0.25rem（4px），v5.0+ 升到 0.375rem（6px），v5.3+ 开始支持 CSS 变量，但仅限于 --bs-border-radius 全局变量，它**不作用于表单控件**——这个变量只影响 .card、.btn 等组件，.form-control 仍写死为 0.375rem。
- 查源码确认：Bootstrap v5.3 的
_forms.scss里明确写了border-radius: $input-border-radius;，而该变量默认值就是0.375rem，未绑定 CSS 变量 - 想全局改？只能重编译 Sass，或统一用 CSS 覆盖，别指望
style="--bs-border-radius: 10px"对输入框起效 - 移动端 Safari 有时会忽略小数值圆角（如
0.125rem），建议用整数像素值（4px、8px）保兼容
配合 form-floating 时圆角被“吃掉”怎么办？
form-floating 把 label 浮在输入框上方，但它的容器 .form-floating 默认没有圆角，且内部 input 的 border-top-left-radius 和 border-top-right-radius 会被 label 的定位遮挡，看起来像“没圆角”。
- 解决方法：给
.form-floating容器加border-radius，同时确保input的四个角都设值，别只设border-bottom-radius - 示例：
.form-floating { border-radius: 8px; } .form-floating > .form-control { border-radius: 8px !important; } - 额外注意：浮动 label 的
transform动画可能让圆角在聚焦瞬间闪烁，可加will-change: transform;缓解
form-floating 场景下的容器圆角缺失，以及误以为 CSS 变量能一统所有组件的 border-radius。
