Border
Use border utilities to quickly style the border of an element. Great for cards,buttons,or any other element.
Set a Border
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. |
Border Sizes
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. |
Remove a Border
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. |
Border Color
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 |
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 |