Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

Download Code View on GitHub

Border

Jump to Guidance

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
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border--0</code>
  </div>
  <div
    class="ds-u-border--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border--1</code>
  </div>
  <div
    class="ds-u-border--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border--2</code>
  </div>
</div>

Horizontal Borders

.ds-u-border-x--0
.ds-u-border-x--1
.ds-u-border-x--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-x--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-x--0</code>
  </div>
  <div
    class="ds-u-border-x--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-x--1</code>
  </div>
  <div
    class="ds-u-border-x--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-x--2</code>
  </div>
</div>

Vertical Borders

.ds-u-border-y--0
.ds-u-borde-y--1
.ds-u-border-y--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-y--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-y--0</code>
  </div>
  <div
    class="ds-u-border-y--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-borde-y--1</code>
  </div>
  <div
    class="ds-u-border-y--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-y--2</code>
  </div>
</div>

Bottom Border

.ds-u-border-bottom--0
.ds-u-border-bottom--1
.ds-u-border-bottom--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-bottom--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-bottom--0</code>
  </div>
  <div
    class="ds-u-border-bottom--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-bottom--1</code>
  </div>
  <div
    class="ds-u-border-bottom--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-bottom--2</code>
  </div>
</div>

Left Border

.ds-u-border-left--0
.ds-u-border-left--1
.ds-u-border-left--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-left--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-left--0</code>
  </div>
  <div
    class="ds-u-border-left--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-left--1</code>
  </div>
  <div
    class="ds-u-border-left--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-left--2</code>
  </div>
</div>

Right Border

.ds-u-border-right--0
.ds-u-border-right--1
.ds-u-border-right--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-right--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-right--0</code>
  </div>
  <div
    class="ds-u-border-right--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-right--1</code>
  </div>
  <div
    class="ds-u-border-right--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-right--2</code>
  </div>
</div>

Top Border

.ds-u-border-top--0
.ds-u-border-top--1
.ds-u-border-top--2
Code snippet
<div class="ds-u-display--flex">
  <div
    class="ds-u-border-top--0 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-top--0</code>
  </div>
  <div
    class="ds-u-border-top--1 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-top--1</code>
  </div>
  <div
    class="ds-u-border-top--2 ds-u-margin-right--2 ds-u-border--dark"
    style="max-width: fit-content"
  >
    <code>.ds-u-border-top--2</code>
  </div>
</div>

Border color

Format: .ds-u-border--[COLOR NAME]

Default Borders

.ds-u-border
.ds-u-border--dark
.ds-u-border--inverse
Code snippet
<div class="ds-u-display--flex ds-u-align-items--center">
  <div class="ds-u-border ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border</code>
  </div>
  <div class="ds-u-border--dark ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--dark</code>
  </div>
  <div class="ds-u-fill--primary-darkest ds-u-padding--1">
    <div class="ds-u-border--inverse ds-u-border--2">
      <code>.ds-u-border--inverse</code>
    </div>
  </div>
</div>

Error Borders

.ds-u-border--error
.ds-u-border--error-light
.ds-u-border--error-lighter
Code snippet
<div class="ds-u-display--flex ds-u-align-items--center">
  <div class="ds-u-border--error ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--error</code>
  </div>
  <div class="ds-u-border--error-light ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--error-light</code>
  </div>
  <div class="ds-u-fill--primary-darkest ds-u-padding--1">
    <div class="ds-u-border--error-lighter ds-u-border--2">
      <code>.ds-u-border--error-lighter</code>
    </div>
  </div>
</div>

Warn Borders

.ds-u-border--warn
.ds-u-border--warn-light
.ds-u-border--warn-lighter
Code snippet
<div class="ds-u-display--flex ds-u-align-items--center">
  <div class="ds-u-border--warn ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--warn</code>
  </div>
  <div class="ds-u-border--warn-light ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--warn-light</code>
  </div>
  <div class="ds-u-fill--primary-darkest ds-u-padding--1">
    <div class="ds-u-border--warn-lighter ds-u-border--2">
      <code>.ds-u-border--warn-lighter</code>
    </div>
  </div>
</div>

Success Borders

.ds-u-border--success
.ds-u-border--success-light
.ds-u-border--success-lighter
Code snippet
<div class="ds-u-display--flex ds-u-align-items--center">
  <div class="ds-u-border--success ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--success</code>
  </div>
  <div class="ds-u-border--success-light ds-u-margin-right--2 ds-u-border--2">
    <code>.ds-u-border--success-light</code>
  </div>
  <div class="ds-u-fill--primary-darkest ds-u-padding--1">
    <div class="ds-u-border--success-lighter ds-u-border--2">
      <code>.ds-u-border--success-lighter</code>
    </div>
  </div>
</div>

Guidance

Customization

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

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