Border

  1. Utilities
  2. Border
Set Border

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

.border
.border-start
.border-top
.border-top & .border-bottom
.border-end
.border-start & .border-end
.border-bottom
Class Description
class="bd" Add border in all sides of an element using default color and width.
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.
Border Sizes

Below are the available border size utilities classes.

.border
.border
.border
.border
.border
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.
Remove Border

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

.border
.border
.border
.border
.border
.border
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-f 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.

.border
.border
.border
.border
.border
.border
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 Description / Value
.rounded Set a border radius of 2px (default) to an element.
.rounded-[value] 5 | 10 | 20 | 30 | 40 | 50 | circle