...

Borders

Skola only

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Colors

Additonal border color utilities. Additonal modifier at the end of the utility name means the opacity level.

<div class="me-3 mb-3 border border-white-10" style="width: 5rem; height: 5rem;"></div>
<div class="me-3 mb-3 border border-white-20" style="width: 5rem; height: 5rem;"></div>
<div class="me-3 mb-3 border border-gray-300" style="width: 5rem; height: 5rem;"></div>
<div class="me-3 mb-3 border border-gray-800" style="width: 5rem; height: 5rem;"></div>
<div class="me-3 mb-3 border border-gray-800-50" style="width: 5rem; height: 5rem;"></div>
<div class="me-3 mb-3 border border-gray-900-50" style="width: 5rem; height: 5rem;"></div>

Responsive

Responsive border utilities to add or remove borders only when you need it.

<div class="border-sm"></div>
<div class="border-md"></div>
<div class="border-lg"></div>
<div class="border-xl"></div>

<div class="border-top-sm"></div>
<div class="border-top-md"></div>
<div class="border-top-lg"></div>
<div class="border-top-xl"></div>

<div class="border-right-sm"></div>
<div class="border-right-md"></div>
<div class="border-right-lg"></div>
<div class="border-right-xl"></div>

<div class="border-bottom-sm"></div>
<div class="border-bottom-md"></div>
<div class="border-bottom-lg"></div>
<div class="border-bottom-xl"></div>

<div class="border-left-sm"></div>
<div class="border-left-md"></div>
<div class="border-left-lg"></div>
<div class="border-left-xl"></div>

<div class="border-sm-0"></div>
<div class="border-md-0"></div>
<div class="border-lg-0"></div>
<div class="border-xl-0"></div>

<div class="border-top-sm-0"></div>
<div class="border-top-md-0"></div>
<div class="border-top-lg-0"></div>
<div class="border-top-xl-0"></div>

<div class="border-right-sm-0"></div>
<div class="border-right-md-0"></div>
<div class="border-right-lg-0"></div>
<div class="border-right-xl-0"></div>

<div class="border-bottom-sm-0"></div>
<div class="border-bottom-md-0"></div>
<div class="border-bottom-lg-0"></div>
<div class="border-bottom-xl-0"></div>

<div class="border-left-sm-0"></div>
<div class="border-left-md-0"></div>
<div class="border-left-lg-0"></div>
<div class="border-left-xl-0"></div>
Jump to