Borders
Border Width
Utilities for sets border width in increments of 1px.
Class
class | css | |
---|---|---|
border | border-width: 1px | |
border-0 | border-width: 0 | |
border-2 | border-width: 2px | |
border-4 | border-width: 4px | |
border-8 | border-width: 8px | |
border-t-0 | border-top-width: 0 | |
border-r-0 | border-right-width: 0 | |
border-b-0 | border-bottom-width: 0 | |
border-l-0 | border-left-width: 0 | |
border-t-2 | border-top-width: 2px | |
border-r-2 | border-right-width: 2px | |
border-b-2 | border-bottom-width: 2px | |
border-l-2 | border-left-width: 2px | |
border-t-4 | border-top-width: 4px | |
border-r-4 | border-right-width: 4px | |
border-b-4 | border-bottom-width: 4px | |
border-l-4 | border-left-width: 4px | |
border-t-8 | border-top-width: 8px | |
border-r-8 | border-right-width: 8px | |
border-b-8 | border-bottom-width: 8px | |
border-l-8 | border-left-width: 8px |
Usage
<!-- Example -->
<y class="border-8">
...
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'border',
//variant: 'responsive',
property: 'border',
modifier: (
'10': '...px',
'12': '...px'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | Yes | |
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |