Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Utilities

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
#212121
.vads-u-border-color--white
$color-white
#ffffff
.vads-u-border-color--black
$color-black
#000000
.vads-u-border-color--orange
$color-orange
#eb7f29
.vads-u-border-color--link-default
$color-link-default
#004795
.vads-u-border-color--warning-message
$color-warning-message
#fac922
.vads-u-border-color--gibill-accent
$color-gibill-accent
#fff1d2
.vads-u-border-color--primary
$color-primary
#0071bb
.vads-u-border-color--primary-darker
$color-primary-darker
#003e73
.vads-u-border-color--primary-darkest
$color-primary-darkest
#112e51
.vads-u-border-color--primary-alt
$color-primary-alt
#02bfe7
.vads-u-border-color--primary-alt-dark
$color-primary-alt-dark
#00a6d2
.vads-u-border-color--primary-alt-darkest
$color-primary-alt-darkest
#046b99
.vads-u-border-color--primary-alt-light
$color-primary-alt-light
#9bdaf1
.vads-u-border-color--primary-alt-lightest
$color-primary-alt-lightest
#e1f3f8
.vads-u-border-color--secondary
$color-secondary
#e31c3d
.vads-u-border-color--secondary-dark
$color-secondary-dark
#cd2026
.vads-u-border-color--secondary-darkest
$color-secondary-darkest
#981b1e
.vads-u-border-color--secondary-light
$color-secondary-light
#e59393
.vads-u-border-color--secondary-lightest
$color-secondary-lightest
#f9dede

Grayscale

.vads-u-border-color--gray
$color-gray
#5b616b
.vads-u-border-color--gray-dark
$color-gray-dark
#323a45
.vads-u-border-color--gray-medium
$color-gray-medium
#757575
.vads-u-border-color--gray-light
$color-gray-light
#aeb0b5
.vads-u-border-color--gray-light-alt
$color-gray-light-alt
#eeeeee
.vads-u-border-color--gray-lighter
$color-gray-lighter
#d6d7d9
.vads-u-border-color--gray-lightest
$color-gray-lightest
#f1f1f1
.vads-u-border-color--gray-warm-dark
$color-gray-warm-dark
#494440
.vads-u-border-color--gray-warm-light
$color-gray-warm-light
#e4e2e0
.vads-u-border-color--gray-cool-light
$color-gray-cool-light
#dce4ef

Tertiary colors

.vads-u-border-color--gold
$color-gold
#fdb81e
.vads-u-border-color--gold-darker
$color-gold-darker
#988530
.vads-u-border-color--gold-light
$color-gold-light
#f9c642
.vads-u-border-color--gold-lighter
$color-gold-lighter
#fad980
.vads-u-border-color--gold-lightest
$color-gold-lightest
#fff1d2
.vads-u-border-color--green
$color-green
#2e8540
.vads-u-border-color--green-darker
$color-green-darker
#195c27
.vads-u-border-color--green-light
$color-green-light
#4aa564
.vads-u-border-color--green-lighter
$color-green-lighter
#94bfa2
.vads-u-border-color--green-lightest
$color-green-lightest
#e7f4e4
.vads-u-border-color--cool-blue
$color-cool-blue
#205493
.vads-u-border-color--cool-blue-light
$color-cool-blue-light
#4773aa
.vads-u-border-color--cool-blue-lighter
$color-cool-blue-lighter
#8ba6ca
.vads-u-border-color--cool-blue-lightest
$color-cool-blue-lightest
#dce4ef

Hub colors

.vads-u-border-color--hub-health-care
$color-hub-health-care
#3f57a6
.vads-u-border-color--hub-education
$color-hub-education
#21827f
.vads-u-border-color--hub-disability
$color-hub-disability
#a23737
.vads-u-border-color--hub-careers
$color-hub-careers
#bd5727
.vads-u-border-color--hub-pension
$color-hub-pension
#3e8520
.vads-u-border-color--hub-housing
$color-hub-housing
#8e704f
.vads-u-border-color--hub-life-insurance
$color-hub-life-insurance
#6f7a41
.vads-u-border-color--hub-burials
$color-hub-burials
#357ab2
.vads-u-border-color--hub-family-member
$color-hub-family-member
#003e73
.vads-u-border-color--hub-service-member
$color-hub-service-member
#003e73

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

---
layout: iframe
permalink: utilities/html/borders-responsive
---

<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>
breakpoint-name width
xsmall-screen 320px
small-screen 481px
medium-screen 768px
small-desktop-screen 1008px
large-screen 1201px