最直接的方式是覆盖css:.form-control { border-radius: 0;},需确保自定义样式在bootstrap css之后加载;若需兼顾:focus等状态,应同步设置.form-control:focus { border-radius: 0;},并单独处理.form-select、.input-group等组件的圆角。

Bootstrap 5 中如何移除 form-control 的圆角
Bootstrap 5 默认给 .form-control 设置了 border-radius: 0.375rem,想改成直角(即 border-radius: 0),最直接的方式是覆盖这个样式。别去改 Bootstrap 源码或重编译,用 CSS 覆盖更稳妥、可维护。
推荐在自定义 CSS 文件中(确保它在 Bootstrap CSS 之后加载)添加:
.form-control {
border-radius: 0;
}
如果只想对特定输入框生效,加个自定义类更安全:
.form-control-square {
border-radius: 0;
}
然后在 HTML 中使用:
<input type="text" class="form-control form-control-square">
为什么不能只写 border-radius: 0 !important
虽然加 !important 能强制生效,但会破坏 CSS 可预测性,后续想给某个输入框单独恢复圆角(比如搜索框)时会很难办。Bootstrap 本身也用 border-radius 控制不同状态(如 :focus、.is-invalid),强行全局 !important 可能导致焦点边框也变直角,而你可能只希望默认态直角、聚焦时仍有视觉反馈。
正确做法是连带覆盖相关状态:
-
.form-control:focus也要设border-radius: 0 - 如果用了
.form-select或.form-check-input,它们的圆角需单独处理 -
.input-group .form-control在组合输入框里可能有左右差异化圆角,需额外重置
Bootstrap 4 和 5 的差异要注意
Bootstrap 4 的 $border-radius 默认值是 0.25rem,5 升级为 0.375rem,但覆盖逻辑一样。不过 Bootstrap 5 移除了 jQuery 依赖,所有 JS 行为(如自动聚焦、验证提示)不受圆角影响,纯样式层改动是安全的。
如果你项目还在用 Bootstrap 4,确认你的 SCSS 变量文件没被覆盖——有些定制主题包会改 $border-radius 全局变量,此时改单个类可能无效,得查 _variables.scss 中的定义。
用 utility 类快速实现(适合临时或局部需求)
Bootstrap 5 自带 rounded-0 工具类,但它不作用于 .form-control 的内边框,而是整个元素容器。直接加在 <input> 上无效,因为 .form-control 本身已设 border-radius,工具类优先级不够。
可行方案是套一层 <div class="rounded-0"> 包住 input,但这会改变盒模型,可能影响 padding 对齐;更稳妥的是自己定义一个 utility:
<pre class="brush:php;toolbar:false;">.rounded-form {
border-radius: 0 !important;
}</pre>
<p>然后用 <code><input class="form-control rounded-form"> ——这里 !important 是可接受的,因为仅限这个 utility,且语义明确。
真正容易被忽略的是:表单控件的圆角还受 overflow 和 clip-path 影响(尤其在 Safari 下),如果发现右下角仍有微小弧度,检查父容器是否设置了 overflow: hidden 或其他裁剪属性。











