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 on all sides

.vads-u-border--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

.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

.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

.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

.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

.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.

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

<div class="vads-l-row vads-u-padding--2">
  <div class="vads-l-col--12 medium-screen:vads-l-col--6 large-screen:vads-u-padding-x--2">
    <p class="vads-u-margin--0 vads-u-padding-x--2 large-screen:vads-u-border--3px">Foo</p>
  </div>
  <div class="vads-l-col--12 medium-screen:vads-l-col--6 large-screen:vads-u-padding-x--2">
    <p class="vads-u-margin--0 vads-u-padding-x--2 vads-u-border-top--1px medium-screen:vads-u-border-top--0 medium-screen:vads-u-border-left--1px large-screen:vads-u-border--3px">Bar</p>
  </div>
</div>

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