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="w-5 h-5 bg-light border"></div>
<div class="w-5 h-5 bg-light border-top"></div>
<div class="w-5 h-5 bg-light border-end"></div>
<div class="w-5 h-5 bg-light border-bottom"></div>
<div class="w-5 h-5 bg-light border-start"></div>
<div class="w-5 h-5 bg-light border-x"></div>
<div class="w-5 h-5 bg-light border-y"></div>

Border size

Below are the available border size utilities classes.

<div class="w-5 h-5 bg-light border-0"></div>
<div class="w-5 h-5 bg-light border"></div>
<div class="w-5 h-5 bg-light border-wide"></div>

Remove border

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

<div class="w-5 h-5 bg-light border border-top-0"></div>
<div class="w-5 h-5 bg-light border border-end-0"></div>
<div class="w-5 h-5 bg-light border border-bottom-0"></div>
<div class="w-5 h-5 bg-light border border-start-0"></div>
<div class="w-5 h-5 bg-light border border-x-0"></div>
<div class="w-5 h-5 bg-light border border-y-0"></div>

Border color

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

<div class="w-5 h-5 bg-light border border-primary"></div>
<div class="w-5 h-5 bg-light border border-secondary"></div>
<div class="w-5 h-5 bg-light border border-success"></div>
<div class="w-5 h-5 bg-light border border-warning"></div>
<div class="w-5 h-5 bg-light border border-danger"></div>
<div class="w-5 h-5 bg-light border border-info"></div>
<div class="w-5 h-5 bg-light border border-light"></div>
<div class="w-5 h-5 bg-light border border-dark"></div>

Border radius

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