Description
In v6-dev, .card declares the CSS variable --bs-card-border-radius but never applies it as a border-radius property on .card itself. The radius is only applied to .card-body:first-child (top corners) and .card-body:last-child (bottom corners).
Result: the .card element paints its background-color as a square. When a .card contains a single .card-body (the most common case), the body's rounded corners sit inside the parent's square box, and the parent's bg-color shows as visible square corners sticking out past the rounded body.
Source (scss/_card.scss → compiled dist/css/bootstrap.css)
The compiled .card rule in v6-dev/dist/css/bootstrap.css:
.card {
--bs-card-border-radius: var(--bs-radius-7); /* declared */
/* ...other tokens... */
background-color: var(--bs-card-bg);
/* ← no `border-radius` property reads --bs-card-border-radius */
}
.card-body:first-child { border-start-*-radius: var(--bs-card-border-radius); }
.card-body:last-child { border-end-*-radius: var(--bs-card-border-radius); }Minimal reproduction
<!doctype html>
<html data-bs-theme="light">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css">
<style>
body { padding: 2rem; background: #1a2f5a; }
/* Force a contrasting bg on the card so the bug is visible */
.card { --bs-card-bg: #ffffff; }
</style>
</head>
<body>
<div class="card card-subtle theme-primary" style="max-width: 360px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text mb-0">The white background is painted as a square; rounded corners on the card-body don't clip the parent's bg.</p>
</div>
</div>
</body>
</html>Open in any modern browser. The card appears with square top-left, top-right, bottom-left, and bottom-right white corners behind a rounded body interior.
Expected behavior
.card should have rounded corners — its background should be clipped to the same radius declared in --bs-card-border-radius.
Actual behavior
.card renders as a square box. Only the .card-body's :first-child / :last-child corners are rounded.
Note on existing workaround
Some Bootstrap examples appear to sidestep the issue by adding overflow-hidden utility to the .card element, which clips the bg to the children's rounded shape. But this requires every author to remember the utility, and any card with a contrasting --bs-card-bg (or any custom theme that recolors cards) hits the bug without that utility.
Proposed fix
Add border-radius: var(--bs-card-border-radius); to the .card rule:
.card {
// ...existing properties...
background-color: var(--bs-card-bg);
border-radius: var(--bs-card-border-radius); // <-- add this
box-shadow: var(--bs-card-box-shadow);
}This applies the radius already declared by the existing variable. The .card-body:first-child / :last-child rules remain unchanged for .card-group / multi-section card use cases.
Environment
- Branch:
v6-dev (commit on main of that branch as of 2026-05-20)
- Browser: any (the issue is in the compiled CSS, not browser-specific)
Description
In v6-dev,
.carddeclares the CSS variable--bs-card-border-radiusbut never applies it as aborder-radiusproperty on.carditself. The radius is only applied to.card-body:first-child(top corners) and.card-body:last-child(bottom corners).Result: the
.cardelement paints itsbackground-coloras a square. When a.cardcontains a single.card-body(the most common case), the body's rounded corners sit inside the parent's square box, and the parent's bg-color shows as visible square corners sticking out past the rounded body.Source (
scss/_card.scss→ compileddist/css/bootstrap.css)The compiled
.cardrule inv6-dev/dist/css/bootstrap.css:Minimal reproduction
Open in any modern browser. The card appears with square top-left, top-right, bottom-left, and bottom-right white corners behind a rounded body interior.
Expected behavior
.cardshould have rounded corners — its background should be clipped to the same radius declared in--bs-card-border-radius.Actual behavior
.cardrenders as a square box. Only the.card-body's:first-child/:last-childcorners are rounded.Note on existing workaround
Some Bootstrap examples appear to sidestep the issue by adding
overflow-hiddenutility to the.cardelement, which clips the bg to the children's rounded shape. But this requires every author to remember the utility, and any card with a contrasting--bs-card-bg(or any custom theme that recolors cards) hits the bug without that utility.Proposed fix
Add
border-radius: var(--bs-card-border-radius);to the.cardrule:This applies the radius already declared by the existing variable. The
.card-body:first-child/:last-childrules remain unchanged for.card-group/ multi-section card use cases.Environment
v6-dev(commit onmainof that branch as of 2026-05-20)