Border

Basic

The u-border* utilities set one or more border edges to a standard width for the project. They combine well with border color utilities.

  • u-border - Adds border to all sides.
  • u-borderEnds - Adds border to top and bottom.
  • u-borderSides - Adds border to left and right.
  • u-borderTop
  • u-borderBottom
  • u-borderLeft
  • u-borderRight

This utility also supports responsive variations, for example u-md-borderLeft to apply a left border at the medium breakpoint.

u-border
u-borderEnds
u-borderSides
u-borderTop
u-borderBottom
u-borderLeft
u-borderRight 
<div class="u-border u-bgWhite u-pad1 u-textCenter">
        u-border
      </div>
      
      <div class="u-borderEnds u-bgWhite u-pad1 u-textCenter">
        u-borderEnds
      </div>
      
      <div class="u-borderSides u-bgWhite u-pad1 u-textCenter">
        u-borderSides
      </div>
      
      <div class="u-borderTop u-bgWhite u-pad1 u-textCenter">
        u-borderTop
      </div>
      
      <div class="u-borderBottom u-bgWhite u-pad1 u-textCenter">
        u-borderBottom
      </div>
      
      <div class="u-borderLeft u-bgWhite u-pad1 u-textCenter">
        u-borderLeft
      </div>
      
      <div class="u-borderRight u-bgWhite u-pad1 u-textCenter">
        u-borderRight
      </div>

Reset

There are four border reset utility classes for resetting the border-width to 0.

  • u-deborder: Affects all viewport widths
  • u-sm-deborder: Affects viewports starting at small viewport widths
  • u-md-deborder: Affects viewports starting at medium viewport widths
  • u-lg-deborder: Affects viewports starting at large viewport widths

Color

Sets border-color to a color from our palette, though currently only the following:

  • u-borderGray
  • u-borderSilver

Color won't be visible until the border has a width and/or style.

u-borderGray
u-borderSilver 
<div class="u-borderGray u-border u-pad1 u-textCenter">
        u-borderGray
      </div>
      
      <div class="u-borderSilver u-border u-pad1 u-textCenter">
        u-borderSilver
      </div>

Radius

u-borderRadius sets the project's standard border-radius value.

There is also a u-lg-borderRadius utility for only applying those corners for larger viewport sizes. More responsive variations may be added at a later date.

u-borderRadius 
<div class="u-borderRadius u-bgWhite u-pad1 u-textCenter">
        u-borderRadius
      </div>