Borders

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

Borders

Note: Borders in examples are made larger and more pronounced for demo purposes.

Add classes to an element to remove all borders or some borders.

<span class="c-bd-0"></span>
<span class="c-bd"></span>
<span class="c-bd-top"></span>
<span class="c-bd-right"></span>
<span class="c-bd-bottom"></span>
<span class="c-bd-left"></span>

HTML

Border color

Change the border color using utilities built on our theme colors.

<span class="c-bd c-bd-primary"></span>
<span class="c-bd c-bd-success"></span>
<span class="c-bd c-bd-warning"></span>
<span class="c-bd c-bd-danger"></span>

HTML

Combined

For example you could add a left border and make it danger.

<span class="c-bd-left c-bd-danger"></span>

HTML