Border

Use shorthand border utility classes to control border, border width and border color on elements.

Notation

Border utility classes can be defined using the format -b{sides}[-{breakpoint}]--{size}.

{sides}

  • t - use to apply border-top
  • b - use to apply border-bottom
  • l - use to apply border-left
  • r - use to apply border-right
  • x - use to apply border-left and border-right
  • y - use to apply border-top and border-bottom
  • blank - leave blank to apply border to all 4 sides.

{breakpoint}

Optionally, include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile-first library, any applying to smaller breakpoints will also modify larger ones unless another class overrides this behaviour.

  • blank - leave blank to apply border to all breakpoints.
  • sm - use to apply border to sm and larger breakpoints.
  • md - use to apply border to md and larger breakpoints.
  • lg - use to apply border to lg and larger breakpoints.
  • xl - use to apply border to xl breakpoints.

{size}

  • 0 - use to eliminate existing border and set to 0
  • 1 - use to set border to 1px
  • 2 - use to set border to 2px
  • 3 - use to set border to 3px
  • 4 - use to set border to 4px

Examples

Border Sides #

Apply borders to specific sides of an element by adding t, b, l, r, x or y to the class name.

-bt--1
-br--1
-bb--1
-bl--1
-bx--1
-by--1

Breakpoints #

Target specific breakpoints with responsive classes.

-bx--0 -by--4
-bx-lg--4 -by-lg--0
-b--0 -b-sm--1
-b-md--2 -b-lg--3
-b-xl--4

Border Sizes #

Control an element's border size by adjusting the size from 0 - 4.

-b--0
-b--1
-b--2
-b--3
-b--4

Border Colors

Use contextual color classes to change a border's color.

Brand #

Brand border colors reinforce Lumen's brand. Use primary and secondary as accents and base, black, and white as neutrals.

Base Light
Base
Base Dark
Primary
Black
Secondary
White

Semantic #

Use semantic border colors to communicate meaning to users. Use green (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention.

Success
Success Light
Info
Info Light
Danger
Danger Light
Warning
Warning Light

Transparent #

Use the transparent border color as a method to hide an element's border without altering its size.

Transparent

Responsive #

Use breakpoint classes to change an element's border color on different viewports. Follow the format -b[-{breakpoint}]--{color}.

-b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning