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

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Border color

<span class="border has-primary-border-color"></span>
<span class="border has-secondary-border-color"></span>
<span class="border has-success-border-color"></span>
<span class="border has-danger-border-color"></span>
<span class="border has-warning-border-color"></span>
<span class="border has-info-border-color"></span>
<span class="border has-light-border-color"></span>
<span class="border has-dark-border-color"></span>
<span class="border has-white-border-color"></span>

Border width

<span class="border border-0"></span>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Border radius

Add classes to an element to easily round its corners.

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">