Border

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>

There is currently a single u-md-deborder utility for resetting border-width at medium viewport widths. More border removal utilities may be added as needed.

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>

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>