Borders
Border utilities render an inset outline that looks like a border without affecting the box model or breaking vertical rhythm. Border radius utilities control corner rounding.
Border weight
Use border for a standard 1px outline, border-2 or border-3 for heavier weights, and border-0 to remove it.
index.htmlhtml
<div class="border rounded-sm p-2 mb-3">border — 1px solid</div>
<div class="border-2 rounded-sm p-2 mb-3">border-2 — 2px solid</div>
<div class="border-3 rounded-sm p-2 mb-3">border-3 — 3px solid</div>
<div class="border-0 rounded-sm p-2">border-0 — no border</div>border — 1px solid
border-2 — 2px solid
border-3 — 3px solid
border-0 — no border
Border radius
Radius utilities set border-radius from token values. Use rounded-pill for fully rounded ends and rounded-circle for a perfect circle (requires equal width and height).
index.htmlhtml
<span class="d-inline-block border p-2 rounded-none mb-3">rounded-none</span>
<span class="d-inline-block border p-2 rounded-xs mb-3">rounded-xs</span>
<span class="d-inline-block border p-2 rounded-sm mb-3">rounded-sm</span>
<span class="d-inline-block border p-2 rounded-md mb-3">rounded-md</span>
<span class="d-inline-block border p-2 rounded-lg mb-3">rounded-lg</span>
<span class="d-inline-block border p-2 rounded-xl mb-3">rounded-xl</span>
<span class="d-inline-block border px-3 py-1 rounded-pill mb-3">rounded-pill</span>
<span class="d-inline-block border p-3 rounded-circle mb-3">rounded-circle</span>rounded-none rounded-xs rounded-sm rounded-md rounded-lg rounded-xl rounded-pill rounded-circle
Reference
| Class | Property | Responsive |
|---|---|---|
.border | outline: var(--bd1) solid var(--border) | No |
.border-0 | outline: 0 | No |
.border-2 | outline: var(--bd2) solid var(--border) | No |
.border-3 | outline: var(--bd3) solid var(--border) | No |
.rounded-none | border-radius: var(--r-none) | No |
.rounded-xs | border-radius: var(--r-xs) | No |
.rounded-sm | border-radius: var(--r-sm) | No |
.rounded-md | border-radius: var(--r-md) | No |
.rounded-lg | border-radius: var(--r-lg) | No |
.rounded-xl | border-radius: var(--r-xl) | No |
.rounded-pill | border-radius: var(--r-pill) | No |
.rounded-circle | border-radius: var(--r-circle) | No |