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 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 element's 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 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

<!-- 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 element's border without altering its size.

Transparent

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

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

<div class="-b--1 -b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning"></div>