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

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