Borders
Use border utilities to add separation, outlines, rounded corners, and visual structure without writing custom CSS.
Basic borders
Add borders to all sides, a single side, or a pair of sides.
Preview
border
border-top
border-right
border-bottom
border-left
border-x
border-y
<div class="border p-3">All sides</div>
<div class="border-bottom p-3">Bottom only</div>
<div class="border-x p-3">Left and right</div>
<div class="border-y p-3">Top and bottom</div>Sides and widths
Combine a side with any border width using the form .border-{side}-{width}. Corner pairs use top-left, top-right, bottom-left, and bottom-right.
Preview
border-top-2
border-left-4
border-right-2
border-bottom-2
border-x-2
border-y-2
border-top-left-4
<div class="border-top-2 p-3">Top 2px</div>
<div class="border-left-4 p-3">Left 4px</div>
<div class="border-right-2 p-3">Right 2px</div>
<div class="border-bottom-2 p-3">Bottom 2px</div>
<div class="border-x-2 p-3">Left and right</div>
<div class="border-y-2 p-3">Top and bottom</div>
<div class="border-top-left-4 p-3">Top-left corner</div>Border styles
Apply a border style on top of the width and color utilities.
Preview
solid
dashed
dotted
double
groove
inset
<div class="border p-3 solid">Solid border</div>
<div class="border p-3 dashed">Dashed border</div>
<div class="border p-3 dotted">Dotted border</div>
<div class="border p-3 double">Double border</div>
<div class="border p-3 groove">Groove border</div>
<div class="border p-3 inset">Inset border</div>| Class | Style |
|---|---|
.solid | border-style: solid |
.dashed | border-style: dashed |
.dotted | border-style: dotted |
.double | border-style: double |
.groove | border-style: groove |
.inset | border-style: inset |
.hidden | border-style: hidden |
Every style also has an alias with a -border suffix, e.g. .solid-border or .dashed-border. Add .hidden to remove the border without touching its width settings.
Border colors
Combine border utilities with color tokens.
primary
success
danger
dark
<div class="border border-primary p-3">Primary border</div>
<div class="border border-danger p-3">Danger border</div>Radius
Use radius utilities to round corners. Named sizes start at .rounded-0 and go up to .rounded-50.
rounded-0
rounded-2
rounded-5
rounded-10
rounded-16
rounded-32
rounded-pill
rounded-full
<button class="bg-primary text-white px-4 py-2 rounded">
Button
</button>
<span class="bg-light border px-3 py-1 rounded-pill">
Badge
</span>Rounded sides and corners
Round individual corners or side pairs using the same full-word naming as border sides.
Preview
rounded-top
rounded-bottom
rounded-top-left
rounded-top-right
rounded-bottom-left
rounded-bottom-right
rounded-top-left-10
<div class="rounded-top p-3">Top corners</div>
<div class="rounded-bottom p-3">Bottom corners</div>
<div class="rounded-top-left p-3">Top-left corner</div>
<div class="rounded-top-right p-3">Top-right corner</div>
<div class="rounded-bottom-left p-3">Bottom-left corner</div>
<div class="rounded-bottom-right p-3">Bottom-right corner</div>
<div class="rounded-top-left-10 p-3">Top-left 10px</div>| Pattern | Purpose |
|---|---|
.rounded-{side} | Round a side pair with the default radius |
.rounded-{corner} | Round a single corner with the default radius |
.rounded-{side}-{size} | Round a side pair with a named size, e.g. .rounded-top-10 |
.rounded-{corner}-{size} | Round a single corner with a named size, e.g. .rounded-top-left-16 |
Outline
Outline utilities expose width, color, and removal classes. With the default configuration they render as borders; set $enable_outline to true in _config.scss to emit real outline properties instead.
Preview
outline
outline-2
outline-4 primary
outline-danger
no-outline
<div class="outline p-3">Default outline</div>
<div class="outline-4 outline-primary p-3">4px primary outline</div>
<div class="no-outline p-3">No outline</div>| Class | Purpose |
|---|---|
.outline | Apply the default outline width, style, and color |
.outline-{width} | Set the outline width (0 to 5) |
.outline-{color} | Apply an outline color token |
.no-outline | Remove the outline |
State variants. Border, radius, and outline utilities all ship ashover:,focus:, andactive:variants, e.g.hover:border-top-2orfocus:border-primary.
Reference
| Class | Purpose |
|---|---|
.border | Add border to all sides |
.border-top | Add top border |
.border-right | Add right border |
.border-bottom | Add bottom border |
.border-left | Add left border |
.border-{width} | Set border width on all sides (e.g. .border-2) |
.border-{side}-{width} | Set border width on one side (e.g. .border-top-2) |
.border-{corner}-{width} | Set border width on two adjacent sides (e.g. .border-top-left-4) |
.border-x-{width} | Set border width on the left and right sides |
.border-y-{width} | Set border width on the top and bottom sides |
.border-0 | Remove border |
.no-border | Remove border and reset its width |
.solid, .dashed, .dotted, .double, .groove, .inset, .hidden | Apply a border style |
.border-{color} | Apply border color token |
.rounded | Apply default radius |
.rounded-{size} | Apply a named radius size, e.g. .rounded-10 |
.rounded-{side} | Round a side pair, e.g. .rounded-top |
.rounded-{corner} | Round a single corner, e.g. .rounded-top-left |
.rounded-0 | Remove border radius |
.rounded-pill | Apply pill radius |
.outline | Apply the default outline width, style, and color |
.outline-{width} | Set the outline width (0 to 5) |
.outline-{color} | Apply an outline color token |
.no-outline | Remove the outline |