Borders

These modular elements can be readily used and customized in every layout across pages.

Border

The classes are named using the format border-{side} for xs and border-{side}-{breakpoint}- for sm, md, lg, xl, and xxl.

Where side is one of:

top - for classes that set style for border-top
bottom - for classes that set style for border-bottom
start - for classes that set style for border-start
end - for classes that set style for margin-right
x - for classes that set both*-left and *-right
y - for classes that set both*-top and *-bottom
blank - for classes that set theborder style on all 4 side of the element.

Use border utilities to quickly style theborder of an element. Great for images, buttons, or any other element.

Examples for adding borders

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Examples for removing borders

For removing border, the classes are named using the format border-{side}-0 for xs and border-{breakpoint}-{side}-0 for sm, md, lg and xl.

<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 Style

For the different border style, add border-{dashed/dotted/hidden/none} classes with border class

<span class="border border-dashed"></span>
<span class="border-top border-dashed"></span>
<span class="border-end border-dashed"></span>
<span class="border-bottom border-dashed"></span>
<span class="border-start border-dashed"></span>

Border Width

You can control border width using helper classes border-{1|2|3|4|5}. In addition, you can also use border-top-2, border-end-2, border-bottom-2, border-start-2.

<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>
<hr />
<span class="border border-top-2"></span>
<span class="border border-end-2"></span>
<span class="border border-bottom-2"></span>
<span class="border border-start-2"></span>

Border Color

Border color set as currentColor and border width 1px . Modifier can be used to change border color and width. The modifier classes for color are named using the format border-{color}.
Where color is one of: primary, secondary, success, info, warning, danger, light, dark, black, 1100, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, white,

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<div class="w-100"></div>
<span class="border border-black"></span>
<span class="border border-white"></span>
<span class="border border-1100"></span>
<span class="border border-1000"></span>
<span class="border border-900"></span>
<span class="border border-800"></span>
<span class="border border-700"></span>
<span class="border border-600"></span>
<span class="border border-500"></span>
<span class="border border-400"></span>
<span class="border border-300"></span>
<span class="border border-200"></span>
<span class="border border-100"></span>

Border rounded

Add helper classes to an element to easily round its corners. For the rounded border, the class are named using the format rounded-*

<span class="border rounded-0"></span>
<span class="border rounded-1"></span>
<span class="border rounded-2"></span>
<span class="border rounded-3"></span>
<span class="border rounded-4"></span>
<span class="border rounded-5"></span>
<span class="border rounded-circle"></span>
<span class="border rounded-pill" style="width:150px; height:75px;"></span>