Skip to main content
U.S. flag

An official website of the United States government

Foundation

Border

Set width, style, and color of an item’s borders.

Border shorthand

The border shorthand utility provides border widths for all sides, as well as top, right, bottom, and left, using solid as the default border-style.

Border

CSS property: border

Border on all sides

.vads-u-border--0

0

.vads-u-border--1px

1px

.vads-u-border--2px

2px

.vads-u-border--3px

3px

.vads-u-border--4px

4px

.vads-u-border--5px

5px

.vads-u-border--7px

7px

.vads-u-border--10px

10px

Border top

.vads-u-border-top--0

0

.vads-u-border-top--1px

1px

.vads-u-border-top--2px

2px

.vads-u-border-top--3px

3px

.vads-u-border-top--4px

4px

.vads-u-border-top--5px

5px

.vads-u-border-top--7px

7px

.vads-u-border-top--10px

10px

Border right

.vads-u-border-right--0

0

.vads-u-border-right--1px

1px

.vads-u-border-right--2px

2px

.vads-u-border-right--3px

3px

.vads-u-border-right--4px

4px

.vads-u-border-right--5px

5px

.vads-u-border-right--7px

7px

.vads-u-border-right--10px

10px

Border bottom

.vads-u-border-bottom--0

0

.vads-u-border-bottom--1px

1px

.vads-u-border-bottom--2px

2px

.vads-u-border-bottom--3px

3px

.vads-u-border-bottom--4px

4px

.vads-u-border-bottom--5px

5px

.vads-u-border-bottom--7px

7px

.vads-u-border-bottom--10px

10px

Border left

.vads-u-border-left--0

0

.vads-u-border-left--1px

1px

.vads-u-border-left--2px

2px

.vads-u-border-left--3px

3px

.vads-u-border-left--4px

4px

.vads-u-border-left--5px

5px

.vads-u-border-left--7px

7px

.vads-u-border-left--10px

10px

Border style

Note: To use the utility for border-style, you must use the border shorthand if your element does not already have a border. Border style cannot be changed across different breakpoints

Border style

  • Responsive

CSS property: border-style

.vads-u-border-style--solid

solid

.vads-u-border-style--dashed

dashed

.vads-u-border-style--dotted

dotted

Border color

Note: To use the utility for border-color, you must use the border shorthand if your element does not already have a border. Border color cannot be changed across different breakpoints.

Border color

  • Responsive

CSS property: border-color

Base colors

.vads-u-border-color--base
$color-base
.vads-u-border-color--white
$color-white
.vads-u-border-color--black
$color-black
.vads-u-border-color--orange
$color-orange
.vads-u-border-color--link-default
$color-link-default
.vads-u-border-color--warning-message
$color-warning-message
.vads-u-border-color--gibill-accent
$color-gibill-accent
.vads-u-border-color--primary
$color-primary
.vads-u-border-color--primary-dark
$color-primary-dark
.vads-u-border-color--primary-darker
$color-primary-darker
.vads-u-border-color--primary-alt
$color-primary-alt
.vads-u-border-color--primary-alt-dark
$color-primary-alt-dark
.vads-u-border-color--primary-alt-darkest
$color-primary-alt-darkest
.vads-u-border-color--primary-alt-light
$color-primary-alt-light
.vads-u-border-color--primary-alt-lightest
$color-primary-alt-lightest
.vads-u-border-color--secondary
$color-secondary
.vads-u-border-color--secondary-dark
$color-secondary-dark
.vads-u-border-color--secondary-darkest
$color-secondary-darkest
.vads-u-border-color--secondary-light
$color-secondary-light
.vads-u-border-color--secondary-lightest
$color-secondary-lightest

Grayscale

.vads-u-border-color--gray
$color-gray
.vads-u-border-color--gray-dark
$color-gray-dark
.vads-u-border-color--gray-medium
$color-gray-medium
.vads-u-border-color--gray-light
$color-gray-light
.vads-u-border-color--gray-light-alt
$color-gray-light-alt
.vads-u-border-color--gray-lighter
$color-gray-lighter
.vads-u-border-color--gray-lightest
$color-gray-lightest
.vads-u-border-color--gray-warm-dark
$color-gray-warm-dark
.vads-u-border-color--gray-warm-light
$color-gray-warm-light
.vads-u-border-color--gray-cool-light
$color-gray-cool-light

Tertiary colors

.vads-u-border-color--gold
$color-gold
.vads-u-border-color--gold-darker
$color-gold-darker
.vads-u-border-color--gold-light
$color-gold-light
.vads-u-border-color--gold-lighter
$color-gold-lighter
.vads-u-border-color--gold-lightest
$color-gold-lightest
.vads-u-border-color--green
$color-green
.vads-u-border-color--green-darker
$color-green-darker
.vads-u-border-color--green-light
$color-green-light
.vads-u-border-color--green-lighter
$color-green-lighter
.vads-u-border-color--green-lightest
$color-green-lightest
.vads-u-border-color--cool-blue
$color-cool-blue
.vads-u-border-color--cool-blue-light
$color-cool-blue-light
.vads-u-border-color--cool-blue-lighter
$color-cool-blue-lighter
.vads-u-border-color--cool-blue-lightest
$color-cool-blue-lightest

Hub colors

.vads-u-border-color--hub-health-care
$color-hub-health-care
.vads-u-border-color--hub-education
$color-hub-education
.vads-u-border-color--hub-disability
$color-hub-disability
.vads-u-border-color--hub-careers
$color-hub-careers
.vads-u-border-color--hub-pension
$color-hub-pension
.vads-u-border-color--hub-records
$color-hub-records
.vads-u-border-color--hub-housing
$color-hub-housing
.vads-u-border-color--hub-life-insurance
$color-hub-life-insurance
.vads-u-border-color--hub-burials
$color-hub-burials
.vads-u-border-color--hub-family-member
$color-hub-family-member
.vads-u-border-color--hub-service-member
$color-hub-service-member

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology. Only the border shorthand property is available with responsive prefixes.

Example

Foo

Bar

VADS Breakpoint Sass Variable USWDS Breakpoint Custom Property Width
$xsmall-screen --mobile 320px
$small-screen --mobile-lg 481px
-- --tablet 640px
$medium-screen --medium-screen 768px
$small-desktop-screen --desktop 1024px
$large-screen --desktop-lg 1201px

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024