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>