Borders

Use border utilities to quickly style the border and border-radius of an element.

Usage

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

Additive

Add borders with the .border-{side} utility class, where side can be top, right, bottom or left. Not supplying a positional modifier applies the utility to all sides.


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

Subtractive

Or substract them using .border-{side}-0.


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

Customizing borders

Color

Change the color of a border with the .border-{color} utility classes.


<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>

Radius

Change the radius of a border with the .rounded utility classes, with various modifiers such as .rounded-top to only round the top.


<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill"></span>
<span class="rounded-0"></span>

And adjust the size of the border radius with .rounded-lg and .rounded-sm for larger a large or smaller radius respectively.


<span class="rounded-sm"></span>
<span class="rounded-lg"></span>