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 breakpoint will modify also larger ones unless other 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 ms 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
<div class="-bt--1"></div>
<div class="-br--1"></div>
<div class="-bb--1"></div>
<div class="-bl--1"></div>
<div class="-bx--1"></div>
<div class="-by--1"></div>

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
<div class="-bx--0 -by--4 -bx-lg--4 -by-lg--0"></div>
<div class="-b--0 -b-sm--1 -b-md--2 -b-lg--3 -b-xl--4"></div>

Border Sizes

Control an elements border size by adjusting the size from 0 - 4.

-b--0
-b--1
-b--2
-b--3
-b--4
<div class="-b--0"></div>
<div class="-b--1"></div>
<div class="-b--2"></div>
<div class="-b--3"></div>
<div class="-b--4"></div>

Border Colors

Use contextual color classes to change a borders 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
<!-- For light backgrounds -->
<div class="-b--1 -b--base-light"></div>
<div class="-b--1 -b--base"></div>
<div class="-b--1 -b--base-dark"></div>
<div class="-b--1 -b--primary"></div>
<div class="-b--1 -b--black"></div>
<!-- For dark backgrounds -->
<div class="-b--1 -b--secondary"></div>
<div class="-b--1 -b--white"></div>

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
<div class="-b--1 -b--success"></div>
<div class="-b--1 -b--success-light"></div>
<div class="-b--1 -b--info"></div>
<div class="-b--1 -b--info-light"></div>
<div class="-b--1 -b--danger"></div>
<div class="-b--1 -b--danger-light"></div>
<div class="-b--1 -b--warning"></div>
<div class="-b--1 -b--warning-light"></div>

Transparent

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

Transparent
<div class="-b--1 -b--transparent"></div>

Responsive

Use breakpoint classes to change an elements 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
<div class="-b--1 -b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning"></div>