Use border utilities to add an element’s borders. Choose from all borders or one at a time.
| Class | Values |
|---|---|
class="border"
|
Add border to all sides of an element |
class="border-[value]"
|
top / bottom / left / right |
Subtractive border utilities will remove border completely or one at a time.
| Class | Values |
|---|---|
class="border-0"
|
Remove border from all sides of an element |
class="border-[value]"
|
top-0 / bottom-0 / left-0 / right-0 |
Change the border color using utilities built on our theme colors.
| Class | Values |
|---|---|
class="border border-[value]"
|
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light-10 / light-15 / light-20 / light-30 / light-40 / light-50 / light-60 / light-70 / light-80 / light-90 / dark-20 / dark-40 / dark-60 / dark-80 / dark-100 |
Add classes to an element to easily round its corners. Single side or all sides at a time.
| Class | Values |
|---|---|
class="border rounded"
|
Set a default border radius of 4px to an element |
class="border rounded-[value]"
|
0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 |
class="border rounded-[value]"
|
top / bottom / left / right / top-left / top-right / bottom-left / bottom-right |
Change the thickness of a border on the fly using below border size utilities.
| Class | Values |
|---|---|
class="border"
|
Default value is set to 1 |
class="border border-[value]"
|
2 / 3 / 4 / 5 |
HR utitlities are available in different colors & different thickness sizes.
| Class | Values |
|---|---|
class="hr-[value]"
|
primary / secondary / info / warning / danger / success / light / light-10 / light-20 / light-30 / dark / dark-20 / dark-40 |
class="hr-soft-[value]"
|
primary / secondary / info / warning / danger / success |
class="hr-[value]"
|
2 / 3 |