Border and radius

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

Where color is one of: black, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, white, primary, info, success, warning, danger, stunning, cake, facebook, twitter, google-plus, github.

Examples for adding border colors and width

<span class="border border-color-black"></span>
<span class="border border-color-1"></span>
<span class="border border-color-2"></span>
<span class="border border-color-3"></span>
<span class="border border-color-4"></span>
<span class="border border-color-5"></span>
<span class="border border-color-6"></span>
<span class="border border-color-7"></span>
<span class="border border-color-8"></span>
<span class="border border-color-9"></span>
<span class="border border-color-10"></span>
<span class="border border-color-11"></span>
<span class="border border-color-white"></span>
<span class="border border-color-primary"></span>
<span class="border border-color-info"></span>
<span class="border border-color-success"></span>
<span class="border border-color-warning"></span>
<span class="border border-color-danger"></span>
<span class="border border-color-stunning"></span>
<span class="border border-color-cake"></span>
<span class="border border-color-facebook"></span>
<span class="border border-color-twitter"></span>
<span class="border border-color-google-plus"></span>
<span class="border border-color-github"></span>
<span class="border border-2x"></span>
black
1
2
3
4
5
6
7
8
9
10
11
white
primary
info
success
warning
danger
stunning
cake
facebook
twitter
google-plus
github
2x

Border radius

The classes are named using the format radius-{size} for xs and radius-{breakpoint}-{corner}-{size} for sm, md, lg, and xl.

Where corner is one of:

  • tr - for classes that set radius-top-right
  • tl - for classes that set radius-top-left
  • br - for classes that set radius-bottom-right
  • bl - for classes that set radius-bottom-left
  • blank - for classes that set a radius on all 4 corners of the element

Where size is one of: 0, primary, secondary, capsule, round.

<span class="radius-0"></span>
<span class="radius-primary radius-lg-tl-round"></span>
<span class="radius-secondary"></span>
<span class="radius-capsule"></span>
<span class="radius-round"></span>