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-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>


<div class="border-0"></div>
<div class="border-top-0"></div>
<div class="border-right-0"></div>
<div class="border-bottom-0"></div>
<div class="border-left-0"></div>

Border Color

Change the border color using utilities built on our theme colors.

<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-tertiary"></div>
<div class="border border-dark"></div>
<div class="border border-success"></div>
<div class="border border-warning"></div>
<div class="border border-danger"></div>

Border Radius

Add classes to an element to easily round its corners.

<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class="rounded-left"></div>
<div class="rounded-circle"></div>
<div class="rounded-pill"></div>
<div class="rounded-0"></div>
Last updated May 10, 2022.