Skip to main content
U.S. Flag

An official website of the United States government

Border

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

.ds-u-border--0
.ds-u-border--1
.ds-u-border--2

Horizontal Borders

.ds-u-border-x--0
.ds-u-border-x--1
.ds-u-border-x--2

Vertical Borders

.ds-u-border-y--0
.ds-u-borde-y--1
.ds-u-border-y--2

Bottom Border

.ds-u-border-bottom--0
.ds-u-border-bottom--1
.ds-u-border-bottom--2

Left Border

.ds-u-border-left--0
.ds-u-border-left--1
.ds-u-border-left--2

Right Border

.ds-u-border-right--0
.ds-u-border-right--1
.ds-u-border-right--2

Top Border

.ds-u-border-top--0
.ds-u-border-top--1
.ds-u-border-top--2

Border color

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

Default Borders

.ds-u-border
.ds-u-border--dark
.ds-u-border--inverse

Error Borders

.ds-u-border--error
.ds-u-border--error-light
.ds-u-border--error-lighter

Warn Borders

.ds-u-border--warn
.ds-u-border--warn-light
.ds-u-border--warn-lighter

Success Borders

.ds-u-border--success
.ds-u-border--success-light
.ds-u-border--success-lighter

Guidance

Customization

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

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