Adjust border location, thickness, style, width, color, and radius
Properties
Border location
Utility class
Description
Example
.border
Border on all sides
.border-left
Border on the left
.border-right
Border on the right
.border-top
Border on the top
.border-bottom
Border on the bottom
.border-x
Border on the left and right
.border-y
Border on the top and bottom
Border thickness
Utility class
Description
Example
.border
If no width is specified, a 1px border is applied.
.border-0
Border with no thinckness
.border-1px
Border with a thickness of 1px
.border-2px
Border with a thickness of 2px
.border-05
Border with a thickness of 4px
.border-1
Border with a thickness of 8px
.border-105
Border with a thickness of 12px
.border-2
Border with a thickness of 16px
.border-205
Border with a thickness of 20px
.border-3
Border with a thickness of 24px
Border with location and thickness
Utility class
Description
Example
.border-left-2px
Border on the left with a thickness of 2px
.border-right-05
Border on the right with a thickness of 4px
.border-top-1
Border on the top with a thickness of 8px
.border-bottom-105
Border on the bottom with a thickness of 12px
.border-x-2
Border on the left and right with a thickness of 16px
.border-y-205
Border on the top and bottom with a thickness of 20px
Border style
Utility class
Description
Example
.border-solid
Solid border
.border-dashed
Dashed border
.border-dotted
Dotted border
Border width
Note: The border-width utilities apply only the border-width property to an item. The border-width
utilities do not actually create a border.
Utility class
Description
.border-width-0
Border with no thinckness
.border-width-1px
Border with a thickness of 1px
.border-left-width-05
Border with a left thickness of 4px
.border-right-width-1
Border with a right thickness of 8px
.border-top-width-105
Border with a top thickness of 12px
.border-bottom-width-2
Border with a bottom thickness of 16px
.border-x-width-205
Border with a left and right thickness of 20px
.border-y-width-3
Border with a left and right thickness of 24px
Border color
Utility class
Example
.border-transparent
.border-white
.border-base-lightest
.border-base-lighter
.border-base-light
.border-base
.border-base-dark
.border-base-darker
.border-base-darkest
.border-black
.border-ink
.border-primary-lighter
.border-primary-light
.border-primary
.border-primary-vivid
.border-primary-dark
.border-primary-darker
.border-secondary-lighter
.border-secondary-light
.border-secondary
.border-secondary-vivid
.border-secondary-dark
.border-secondary-darker
.border-accent-cool-lighter
.border-accent-cool-light
.border-accent-cool
.border-accent-cool-dark
.border-accent-cool-darker
.border-accent-warm-lighter
.border-accent-warm-light
.border-accent-warm
.border-accent-warm-dark
.border-accent-warm-darker
.border-white
.border-gray-5
.border-gray-10
.border-gray-30
.border-gray-50
.border-gray-70
.border-gray-90
.border-black
.border-red
.border-orange
.border-gold
.border-yellow
.border-green
.border-mint
.border-cyan
.border-blue
.border-indigo
.border-violet
.border-magenta
Border radius
Utility class
Description
Example
.radius-0
Square with no radius
.radius-sm
Square with a small 2px radius
.radius-md
Square with a medium 4px radius
.radius-lg
Square with a large 8px radius
.radius-pill
Rectangle with a pill shaped radius (99rem)
.radius-top-lg
Rectangle with a large 8px radius on the top
.radius-bottom-pill
Rectangle with a pill shaped radius on the bottom (99rem)
Utility classes
Utility classes may be included in your HTML or applied using Utility classes in your Sass.
Utility
Example
Code
.border-units
.border-2px
class=("border-2px")
.border-modifier-units
.border-y-1
class=("border-y-1")
.border-color
.border-accent-cool-dark
class=("border-accent-cool-dark")
.border-token
.border-dotted
class=("border-dotted")
.border-radius
.border-sm
class=("border-sm"))
.radius-modifier-radius
.radius-left-pill
class=("radius-left-pill")
Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like
'105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may
also be written with their unquoted number token equivalent: 0.5, 1.5,
2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single
utility accepts multiple kinds of values (ex: .border accepts both border weight and border
color), their shared mixin can accept multiple comma-separated values:
u-text('primary-darkest', 'no-underline', 'bold')
u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s
argument list:
u-bg('red-warm-50v', !important)
Utility variants
More information about utility variants can be viewed on the utility variants page.
Responsive and state variants are listed as true when they are available for use.
Responsive variants
You can apply different styles at differentresponsive breakpoints using responsive utilities.
Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).
Utility variable
Responsive
$border-settings
true
$border-style-settings
true
$border-width-settings
true
$border-color-settings
true
$border-radius-settings
true
State variants
You can apply different styles for different state variants using state utilities.
Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).
Utility variable
Active
Focus
Hover
Visited
$border-settings
false
false
true
false
$border-style-settings
false
false
false
false
$border-width-settings
false
false
false
false
$border-color-settings
false
false
true
false
$border-radius-settings
false
false
false
false
Looking for U.S. government information and services?
