Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Additive
<div class="border"></div>
<div class="border-top"></div>
<div class="border-end"></div>
<div class="border-bottom"></div>
<div class="border-start"></div>
Dashed
<div class="border-dashed"></div>
<div class="border-top-dashed"></div>
<div class="border-end-dashed"></div>
<div class="border-bottom-dashed"></div>
<div class="border-start-dashed"></div>
Border Colors
<div class="border border-primary"></div>
<div class="border border-primary-subtle"></div>
<div class="border border-secondary"></div>
<div class="border border-secondary-subtle"></div>
<div class="border border-success"></div>
<div class="border border-success-subtle"></div>
<div class="border border-danger"></div>
<div class="border border-danger-subtle"></div>
<div class="border border-warning"></div>
<div class="border border-warning-subtle"></div>
<div class="border border-info"></div>
<div class="border border-info-subtle"></div>
<div class="border border-light"></div>
<div class="border border-light-subtle"></div>
<div class="border border-dark"></div>
<div class="border border-dark-subtle"></div>
<div class="border border-black"></div>
<div class="border border-white"></div>
Border Opacity
<div class="border border-primary p-2 mb-2">This is default primary border</div>
<div class="border border-primary p-2 mb-2 border-opacity-75">This is 75% opacity primary border</div>
<div class="border border-primary p-2 mb-2 border-opacity-50">This is 50% opacity primary border</div>
<div class="border border-primary p-2 mb-2 border-opacity-25">This is 25% opacity primary border</div>
<div class="border border-primary p-2 border-opacity-10">This is 10% opacity primary border</div>
This is default primary border
This is 75% opacity primary border
This is 50% opacity primary border
This is 25% opacity primary border
This is 10% opacity primary border