Borders

Base

Currently we use a consistent border size and color throughout the app, so the border utilities all share these properties. If in the future we need variation in size and color, we can expand upon these classes:

  • u-border
  • u-borderRight
  • u-borderLeft
  • u-borderTop
  • u-borderBottom
  • u-borderNone
  • u-borderRightNone
  • u-borderLeftNone
  • u-borderTopNone
  • u-borderBottomNone
u-border
u-borderTop
u-borderRight
u-borderBottom
u-borderLeft

Responsive

Use breakpoints to specifiy min screen widths for borders and radius.

Breakpoints: xs, sm, md and lg

Applies to all border utilities.

  • eg: u-xs-border, u-md-borderRight, u-lg-borderNone
  • eg: u-xs-borderRadiusNone, u-md-borderRadiusLg
u-xs-border
u-sm-borderTop
u-md-borderRight
u-lg-borderBottom

Radius

Adds different sizes of border-radius to elements.

  • u-borderRadiusNone
  • u-borderRadiusSm (2px)
  • u-borderRadiusMd (4px)
  • u-borderRadiusLg (8px)
u-borderRadiusNone
u-borderRadiusSm
u-borderRadiusMd
u-borderRadiusLg

Color

Override the color of the border.

Border color won't set the border just change the color.

  • u-borderColorDefault
  • u-borderColorLight
  • u-borderColorPrimary
  • u-borderColorHighlight
  • u-borderColorPostive
  • u-borderColorNegative
u-borderColorDefault
u-borderColorLight
u-borderColorPrimary
u-borderColorHighlight
u-borderColorPositive
u-borderColorNegative