Backgrounds
Background Border
Utilities for sets background border to an element with flexible control over the border spacing, size, angle and length.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
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 |
| class | css |
|---|---|
| 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 |
| class | css |
|---|---|
| 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 |
| class | css |
|---|---|
| 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 |
| class | css |
|---|---|
| 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.
<div class="bg-border length-20 size-9 space-30 angle-45 ... height-32 width-56">
...
</div>
HTML
.dummy {
@extend
.bg-border,
.length-20,
.size-9,
.space-30,
.angle-45,
.height-32,
.width-56";
}
SCSS
Set background border with color by using text-{color} utility (See Text Color).
<div class="bg-border length-20 size-9 space-30 angle-45 text-amber-4 ... height-32 width-56">
...
</div>
HTML
.dummy {
@extend
.bg-border,
.length-20,
.size-9,
.space-30,
.angle-45,
.text-amber-4,
.height-32,
.width-56;
}
SCSS
Set background border solid.
<div class="bg-border length-10 size-6 space-10 angle-45 text-amber-4 ... height-32 width-56">
...
</div>
HTML
.dummy {
@extend
.bg-border,
.length-10,
.size-6,
.space-10,
.angle-45,
.text-amber-4,
.height-32,
.width-56;
}
SCSS
Set background border solid and thicker.
<div class="bg-border length-10 size-32 space-10 angle-45 ... height-32 width-56">
...
</div>
HTML
.dummy {
@extend
.bg-border,
.length-10,
.size-32,
.space-10,
.angle-45,
.height-32,
.width-56;
}
SCSS