border, border-0/2/4/8 plus per-side border-t/r/b/l widths. This family contains 25 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
border-0 | border-width: 0px; |
border-2 | border-width: 2px; |
border-4 | border-width: 4px; |
border-8 | border-width: 8px; |
border | border-width: 1px; |
border-t-0 | border-top-width: 0px; |
border-t-2 | border-top-width: 2px; |
border-t-4 | border-top-width: 4px; |
border-t-8 | border-top-width: 8px; |
border-t | border-top-width: 1px; |
border-r-0 | border-right-width: 0px; |
border-r-2 | border-right-width: 2px; |
border-r-4 | border-right-width: 4px; |
border-r-8 | border-right-width: 8px; |
border-r | border-right-width: 1px; |
border-b-0 | border-bottom-width: 0px; |
border-b-2 | border-bottom-width: 2px; |
border-b-4 | border-bottom-width: 4px; |
border-b-8 | border-bottom-width: 8px; |
border-b | border-bottom-width: 1px; |
border-l-0 | border-left-width: 0px; |
border-l-2 | border-left-width: 2px; |
border-l-4 | border-left-width: 4px; |
border-l-8 | border-left-width: 8px; |
border-l | border-left-width: 1px; |
Example#
example
<div class="border-2 border-blue-500 p-4">Boxed</div>
<div class="border-l-4 border-red-500 pl-4">Alert rail</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- The 1px default
borderneeds a border-color to be visible - border-t on list items = hairline dividers
Related#
utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline