Utilities - Borders

Basic

Use .borderclasses to set an element's border style. For border directions use .border-{direction}or .border-{direction}classes format.

Where directionis one of:

top- for classes that set border top style
bottom- for classes that set border bottom style
end- for classes that set border right style
start- for classes that set border start style

default style

.border-top

.border-bottom

.border-start

.border-end

<div class="border">default style</div>
<div class="border-gray-300 border-top">.border-top</div>
<div class="border-gray-300 border-bottom">.border-bottom</div>
<div class="border-gray-300 border-start">.border-start</div>
<div class="border-gray-300 border-end">.border-end</div>

Border color

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

<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>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>