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 |