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

Guidance

Customization

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

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