Skip to main content
U.S. Flag

An official website of the United States government


Use the border utility classes to control the border size and color properties.

The border utility class sets the border-color and border-size, with support for the following sizes: 0, 1px, or 2px.

Border Variations

Format: .ds-u-border-[x|y|bottom|left|right|top]--[SIZE]

All Borders


Horizontal Borders


Vertical Borders


Bottom Border


Left Border


Right Border


Top Border


Border color

Format: .ds-u-border--[COLOR NAME]

Default Borders


Error Borders


Warn Borders


Success Borders




The following CSS variables can be overridden to theme the border utility:

  • --color-border
  • --color-border-dark
  • --color-border-inverse