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

Use contextual color classes to change a border's color.