Borders

Border utilities set the sides, width, color, radius and opacity of an element's border with a class.

Border direction

Use these classes to put a border on one side, on two opposite sides or all around an element. border-x and border-y set both horizontal or both vertical sides at once.

<div class="border">1</div>
<div class="border-top">2</div>
<div class="border-end">3</div>
<div class="border-bottom">4</div>
<div class="border-start">5</div>
<div class="border-x">6</div>
<div class="border-y">7</div>

Border size

Three widths are available: none, the default width and a wider one.

<div class="border-0">1</div>
<div class="border">2</div>
<div class="border-wide">3</div>

Remove border

When an element already has border, remove it from one side with the -0 suffix. This is handy when two elements sit next to each other and would otherwise draw a double line.

<div class="border border-top-0">1</div>
<div class="border border-end-0">2</div>
<div class="border border-bottom-0">3</div>
<div class="border border-start-0">4</div>
<div class="border border-x-0">5</div>
<div class="border border-y-0">6</div>

Border color

Set the border color with one of the theme color classes. The names follow the color utilities.

<div class="border border-primary">1</div>
<div class="border border-secondary">2</div>
<div class="border border-success">3</div>
<div class="border border-warning">4</div>
<div class="border border-danger">5</div>
<div class="border border-info">6</div>
<div class="border border-dark">7</div>
<div class="border border-light">8</div>

Border radius

The rounded-* classes set the border radius, from square corners through three sizes to a full circle.

<div class="border rounded-0">1</div>
<div class="border rounded">2</div>
<div class="border rounded-1">3</div>
<div class="border rounded-2">4</div>
<div class="border rounded-3">5</div>
<div class="border rounded-circle">6</div>

Border opacity

The border-opacity-* classes make a colored border partly transparent. Use them to soften a border without picking a lighter color.

<div class="border border-success border-opacity-50">This is 50% opacity success border</div>

Accessibility

• A border is decoration. It cannot be the only thing that marks a selected, focused or invalid state.
• Do not remove a focus outline with a border utility. If you restyle focus, keep a visible ring with at least 3:1 contrast against its surroundings.
• Border colors are often below the contrast needed for text, which is fine for a divider but not for something that carries meaning.
• A border used to group form fields does not create a group. Use a fieldset with a legend.

Related