Border
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border color
Change the border color using utilities built on our theme colors.
<div class="w-75p h-75p bg-gray-light-4 border border-primary"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-success"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-info"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-warning"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-danger"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-light"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-dark"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-white"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-teal"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-gold"></div>
| 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 / gray / gold / smoke |
Border Radius
Change the border color using utilities built on our theme colors.
<div class="w-75p h-75p bg-gray-light-4 border rounded"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-top"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-bottom"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-start"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-end"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-top-start"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-top-end"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-bottom-start"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-bottom-end"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-5"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-10"></div>
<div class="w-75p h-75p bg-gray-light-4 border rounded-20"></div>
| Class | Values |
|---|---|
class="border rounded" |
Set a default border radius of .25rem to an element |
class="border rounded-[value]" |
0 / 1 / 2 / 3 / 4 / ... / 34 / top / bottom / start / end / top-start / top-end / bottom-start / bottom-end |
Border Size
Change the thickness of a border on the fly using below border size utilities.
<div class="w-75p h-75p bg-gray-light-4 border"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-2"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-3"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-4"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-5"></div>
| Class | Values |
|---|---|
class="border" |
Default value is set to 1 |
class="border border-[value]" |
2 / 3 / 4 / 5 |