Set a Border

The following border utilities classes will add border to any side of an element.

Class Reference

Class	Description
class="bd"	Add border in all sides of an element with default color gray and default width of 1px.
class="bd-t"	Add border to top side of element.
class="bd-r"	Add border to right side of element.
class="bd-b"	Add border to bottom side of element.
class="bd-l"	Add border to left side of element.
class="bd-x"	Add border to left and right side of element.
class="bd-y"	Add border to top and bottom side of element.

Sample Usage

Source Code

<div class="bd-l bd-3 bd-danger bg-gray-200 pd-x-20 pd-y-25">
  <h5 class="tx-danger">Oh snap! Change a few things up and try submitting again.</h5>
  <p class="mg-b-0">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>

Border Sizes

Below are the available border size utilities classes.

Class Reference

Class	Description
class="bd"	Set 1px (default) border to element.
class="bd bd-2"	Set 2px border to element.
class="bd bd-3"	Set 3px border to element.
class="bd bd-4"	Set 4px border to element.
class="bd bd-5"	Set 5px border to element.

Removing a Border

You can remove a border to a single side of an element by using the following border utilities classes.

Class Reference

Class	Description
.bd-t-0	Remove top border of an element
.bd-r-0	Remove right border of an element
.bd-b-0	Remove bottom border of an element
.bd-l-0	Remove left border of an element
.bd-x-0	Remove left and right border of an element
.bd-y-0	Remove top and bottom border of an element
.bd-[t||r|bl|x|y]-0-force	Force remove border of any side of an element.

Border Color

You can set a border color of any side of an element by adding the following utilities classes below.

Class Reference

Class	Value
.bd-[value]	primary | success | warning | danger | info | indigo | purple | pink | teal | orange
.bd-gray-[value]	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Border Radius

You can set a border to any element by using the following utilities classes below.

Class Reference

Class	Description / Value
.rounded	Set a border radius of 3px (default) to an element.
.rounded-[value]	5 | 10 | 20 | 30 | 40 | 50 | circle

You can also set a border radius to a single side of an element with the default radius value of 3px.

Class Reference

Class	Value
.rounded-[value]	top | right | bottom | left