Borders

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

Borders on Bootstrap
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.

Additive
<span class="border"></span>
<span class="border-top"></span>
<span class="borderright"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
Subtractive
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
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>
Border Radius

Add classes to an element to easily round its corners.

<span class="rounded-0"></span>
<span class="rounded"></span>
<span class="rounded-soft"></span>
<span class="rounded-circle"></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, xl and xxl.

Where side is same as documented before.

<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-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, 

<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>
<div class="w-100"></div>
<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>