Use border utilities to quickly style the border and border-radius of an element.
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
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
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>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. |
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. |
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 |
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 |