Background

Background Border v1.0.9

Utilities for sets background border to an element with flexible control over the border spacing, size, angle and length.


Class

classcss
bg-border {length} {size} {space} {angle}background-image: repeating-linear-gradient(var(--bg-border-angle-left), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-top), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-right), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-bottom), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space));

background-size: var(--bg-border-width) 100%, 100% var(--bg-border-width), var(--bg-border-width) 100%, 100% var(--bg-border-width);

background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat
Note: Your browser does not currently support the utilities.
classcss
length-10--bg-border-length: 10
length-20--bg-border-length: 20
length-30--bg-border-length: 30
length-40--bg-border-length: 40
length-50--bg-border-length: 50
length-60--bg-border-length: 60
length-70--bg-border-length: 70
length-80--bg-border-length: 80
classcss
size-6--bg-border-size: 6px
size-9--bg-border-size: 9px
size-12--bg-border-size: 12px
size-14--bg-border-size: 14px
size-18--bg-border-size: 18px
size-24--bg-border-size: 24px
size-32--bg-border-size: 32px
classcss
space-10--bg-border-space: 10px
space-20--bg-border-space: 20px
space-30--bg-border-space: 30px
space-40--bg-border-space: 40px
space-50--bg-border-space: 50px
space-60--bg-border-space: 60px
space-70--bg-border-space: 70px
space-80--bg-border-space: 80px
classcss
angle-45--bg-border-angle: 45deg
-angle-45--bg-border-angle: -45deg
angle-60--bg-border-angle: 60deg
-angle-60--bg-border-angle: -60deg

Usage

Set basic background border to an element.

<!-- Example -->
<y class="bg-border length-20 size-9 space-30 angle-45 ... h-32 w-56">
...
</y>

Set background border with color by using text-{color} utility (See Text Color).

<!-- Example -->
<y class="bg-border length-20 size-9 space-30 angle-45 text-amber-400 ... h-32 w-56">
...
</y>

Set background border solid.

<!-- Example -->
<y class="bg-border length-10 size-6 space-10 angle-45 ... h-32 w-56">
...
</y>

Set background border solid and thicker.

<!-- Example -->
<y class="bg-border length-10 size-32 space-10 angle-45 ... h-32 w-56">
...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'length',
//variant: 'responsive',
property: '--bg-border-length',
modifier: (
'90': '90',
'100': '100'
//...
)
),
(
utility: 'size',
//variant: 'responsive',
property: '--bg-border-size',
modifier: (
'64': '64px',
'72': '72px'
//...
)
),
(
utility: 'space',
//variant: 'responsive',
property: '--bg-border-space',
modifier: (
'90': '90px',
'100': '100px'
//...
)
),
(
utility: 'angle',
//variant: 'responsive',
property: '--bg-border-angle',
modifier: (
'90': '80deg',
'80': '90deg'
//...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled