Borders
Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.
Border Additive & Substractive
Additive
Substractive
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
Border Width
<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>
<span class="border border-1 border-dashed"></span>
<span class="border border-2 border-dashed"></span>
<span class="border border-3 border-dashed"></span>
<span class="border border-4 border-dashed"></span>
<span class="border border-5 border-dashed"></span>
<span class="border border-1 border-dotted"></span>
<span class="border border-2 border-dotted"></span>
<span class="border border-3 border-dotted"></span>
<span class="border border-4 border-dotted"></span>
<span class="border border-5 border-dotted"></span>
Border Color
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-light"></div>
<div class="border border-dark"></div>
Border Radius
Radius
Size
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<!-- Substractive -->
<img src="..." class="rounded rounded-top-0" alt="...">
<img src="..." class="rounded rounded-end-0" alt="...">
<img src="..." class="rounded rounded-bottom-0" alt="...">
<img src="..." class="rounded rounded-start-0" alt="...">