不存在。Bootstrap 5 已移除 rounded-0~rounded-3 数字类,改用 rounded、rounded-top、rounded-pill、rounded-circle 等语义化类;需通过自定义类、CSS 变量或内联样式实现数字级圆角控制。

Bootstrap 5 的 rounded-1 到 rounded-3 还存在吗?
不存在。Bootstrap 5 已移除 rounded-0~rounded-3 这类数字分级类名,统一改用语义化命名:rounded(默认圆角)、rounded-top(仅上边)、rounded-pill(胶囊形)、rounded-circle(正圆)。如果你在代码里写了 rounded-2 却没效果,大概率是版本混淆——确认你用的是 Bootstrap 5.x(非 4.x),且未混入旧版 CSS。
想用数字控制圆角大小,该怎么写?
Bootstrap 5 默认不提供 rounded-1 这类类,但可通过以下方式实现类似效果:
- 直接写内联样式:
style="border-radius: 0.25rem"(对应旧版rounded-1) - 覆盖 CSS 变量:
:root { --bs-border-radius-sm: 0.25rem; --bs-border-radius: 0.375rem; --bs-border-radius-lg: 0.5rem; }—— 这会影响所有使用这些变量的组件(btn、card、form-control等) - 自定义工具类(推荐用于项目级复用):
.rounded-1 { border-radius: 0.25rem !important; }<br>.rounded-2 { border-radius: 0.5rem !important; }<br>.rounded-3 { border-radius: 0.75rem !important; }注意:加!important是为压过 Bootstrap 原生rounded类(它值为0.25rem),但要小心和rounded-pill冲突
rounded 和 rounded-pill 混用会怎样?
会覆盖。因为 rounded-pill 的声明是 border-radius: 50%,优先级与 rounded 相同(同为单类名),后写的生效。常见错误是这样写:class="rounded rounded-pill",结果只有胶囊形,小圆角被完全忽略。如果只想微调胶囊形的弧度(比如不要那么“鼓”),不能靠叠加类,得单独写:style="border-radius: 30%" 或定义新 class。
表格单元格加 rounded 为什么无效?
因为 <table> 默认是 border-collapse: collapse,单元格没有独立边框盒模型,border-radius 无法作用于单个 <td>。解决办法只有两个:
- 改表格边框模型:
.my-table { border-collapse: separate; border-spacing: 0; },再给td加border-radius - 放弃单格圆角,改用容器包裹:
<div class="rounded-3 overflow-hidden"><table class="mb-0">...</table></div>——这是最稳定、无兼容性风险的做法
--bs-border-radius,按钮、输入框、卡片、下拉菜单的圆角全跟着变;而单独给某个 img 加 border-radius,又得同步管好它的宽高比、父容器溢出、是否响应式——这些细节不串起来看,改了也白改。


















