Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border direction

The following border utilities classes will add border to any side of an element.

<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

Below are the available border size utilities classes.

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

Remove border

You can remove a border on a single side of an element by using the following border utilities classes.

<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

You can set a border color of any side of an element by adding the following utilities classes below.

<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

You can set a border to any element by using the following utilities classes below.

<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>