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-{breakpoint}-{side} for sm, md, lg, and xl.

Where side is one of:

  • top - for classes that set style for border-top
  • bottom - for classes that set style for border-bottom
  • left - for classes that set style for border-left
  • right - 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 the border style on all 4 side of the element.

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

Examples for adding borders
<span class="border"></span>
<span class="border-top border-md-left"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

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.

Where side is same as documented before.

Examples for removing borders
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-lg-left-0"></span>

Border style

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

Where side is same as documented before.

Examples for dashed borders
<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-sm-dashed-right"></span>
<span class="border-dashed-bottom"></span>
<span class="border-dashed-left"></span>

Border color and width

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} and for width border-2x.

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,

Examples for adding border colors and width
<span class="border border-info"></span>
<span class="border border-success"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-stunning"></span>
<span class="border border-cake"></span>
<span class="border border-facebook"></span>
<span class="border border-twitter"></span>
<span class="border border-google-plus"></span>
<span class="border border-github"></span>
<span class="border border-black"></span>
<span class="border border-dark"></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>
<span class="border border-light"></span>
<span class="border border-white"></span>
<span class="border border-2x"></span>
primarysecondarysuccessinfowarningdangerlightdarkblack11001000900800700600500400300200100white2x

Border rounded

<span class="rounded-0"></span>
<span class="rounded"></span>
<span class="rounded-soft"></span>
<span class="rounded-circle"></span>
.rounded-0.rounded.rounded-soft.rounded-circle