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


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


  • 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.


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.


  • 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


Border Sides

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

<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>


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
<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.

<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 border colors reinforce CenturyLink's brand. Use primary and secondary as accents and base, dark, and light as neutrals.

<!-- For light backgrounds -->
<div class="-b--1"></div>
<div class="-b--1 -b--primary"></div>
<div class="-b--1 -b--dark"></div>
<!-- For dark backgrounds -->
<div class="-b--1 -b--secondary"></div>
<div class="-b--1 -b--light"></div>


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

<div class="-b--1 -b--success"></div>
<div class="-b--1 -b--info"></div>
<div class="-b--1 -b--danger"></div>
<div class="-b--1 -b--warning"></div>


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

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


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>