Use border utilities to quickly style the border of an element. Great for cards, buttons, or any other element.
The following border utilities classes will add border to any side of an element.
| 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. |
Below are the available border size utilities classes.
| 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. |
You can remove a border to a single side of an element by using the following border utilities classes.
| 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. |
You can set a border color of any side of an element by adding the following utilities classes below.
| 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 |
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 |