Skip to main content

An official website of the United States government

Here's how you know

Design System

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

What's new?

View code on GitHub

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

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

Style customization

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

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

On this page

Have ideas?