Border

Set width, color, style, and radius of an item’s borders. Refer to our Figma Guide for how to apply Border utilities to an item in Figma.

Utility Modules

Border

Set the position and width of an item’s borders.

Mixins and Functions

Utility	Mixin	Example
.border-`units`	u-border(`units`)	@include u-border(2px)
.border-top-`units`	u-border-top(`units`)	@include u-border-top(2px)
.border-bottom-`units`	u-border-bottom(`units`)	@include u-border-bottom(2px)
.border-left-`units`	u-border-left(`units`)	@include u-border-left(2px)
.border-right-`units`	u-border-right(`units`)	@include u-border-right(2px)
.border-x-`units`	u-border-x(`units`)	@include u-border-x(2px)
.border-y-`units`	u-border-y(`units`)	@include u-border-y(2px)

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
border	True	hover	4.35 KB	23.5 KB

Border

.border

.border-top

.border-bottom

.border-left

.border-right

.border-x

.border-y

Border on All Sides

.border

1px

.border-0

.border-1px

1px

.border-2px

2px

.border-05

4px

.border-1

8px

.border-105

12px

.border-2

16px

.border-205

20px

.border-3

24px

Border on the Top

.border-top

1px

.border-top-0

.border-top-1px

1px

.border-top-2px

2px

.border-top-05

4px

.border-top-1

8px

.border-top-105

12px

.border-top-2

16px

.border-top-205

20px

.border-top-3

24px

Border on the Bottom

.border-bottom

1px

.border-bottom-0

.border-bottom-1px

1px

.border-bottom-2px

2px

.border-bottom-05

4px

.border-bottom-1

8px

.border-bottom-105

12px

.border-bottom-2

16px

.border-bottom-205

20px

.border-bottom-3

24px

Border on the Left

.border-left

1px

.border-left-0

.border-left-1px

1px

.border-left-2px

2px

.border-left-05

4px

.border-left-1

8px

.border-left-105

12px

.border-left-2

16px

.border-left-205

20px

.border-left-3

24px

Border on the Right

.border-right

1px

.border-right-0

.border-right-1px

1px

.border-right-2px

2px

.border-right-05

4px

.border-right-1

8px

.border-right-105

12px

.border-right-2

16px

.border-right-205

20px

.border-right-3

24px

Border on the Left and Right

.border-x

1px

.border-x-0

.border-x-1px

1px

.border-x-2px

2px

.border-x-05

4px

.border-x-1

8px

.border-x-105

12px

.border-x-2

16px

.border-x-205

20px

.border-x-3

24px

Border on the Top and Bottom

.border-y

1px

.border-y-0

.border-y-1px

1px

.border-y-2px

2px

.border-y-05

4px

.border-y-1

8px

.border-y-105

12px

.border-y-2

16px

.border-y-205

20px

.border-y-3

24px

Border Style

Set the style of the border.

Note - The border-style class styles will only be visible if a .border class is also applied to the element.

Mixins and Functions

Utility	Mixin	Example
.border-`style`	u-border(`style`)	@include u-border('dotted')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
border-style	True	None	0.03 KB	0.14 KB

.border-solid

.border-dashed

.border-dotted

Border Width

Set the width of the border.

Note - The border-width class styles will only be visible if a .border class is also applied to the element.

Mixins and Functions

Utility	Mixin	Example
.border-width-`units`	u-???(`units`)	@include u-???('05')
.border-top-width-`units`	u-???(`units`)	@include u-???('05')
.border-bottom-width-`units`	u-???(`units`)	@include u-???('05')
.border-left-width-`units`	u-???(`units`)	@include u-???('05')
.border-right-width-`units`	u-???(`units`)	@include u-???('05')
.border-x-width-`units`	u-???(`units`)	@include u-???('05')
.border-y-width-`units`	u-???(`units`)	@include u-???('05')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
border-width	True	None	0.56 KB	3 KB

.border-width-0

.border-width-1px

1px

.border-width-2px

2px

.border-width-05

4px

.border-width-1

8px

.border-width-105

12px

.border-width-2

16px

.border-width-205

20px

.border-width-3

24px

.border-top-width-0

.border-top-width-1px

1px

.border-top-width-2px

2px

.border-top-width-05

4px

.border-top-width-1

8px

.border-top-width-105

12px

.border-top-width-2

16px

.border-top-width-205

20px

.border-top-width-3

24px

.border-bottom-width-0

.border-bottom-width-1px

1px

.border-bottom-width-2px

2px

.border-bottom-width-05

4px

.border-bottom-width-1

8px

.border-bottom-width-105

12px

.border-bottom-width-2

16px

.border-bottom-width-205

20px

.border-bottom-width-3

24px

.border-left-width-0

.border-left-width-1px

1px

.border-left-width-2px

2px

.border-left-width-05

4px

.border-left-width-1

8px

.border-left-width-105

12px

.border-left-width-2

16px

.border-left-width-205

20px

.border-left-width-3

24px

.border-right-width-0

.border-right-width-1px

1px

.border-right-width-2px

2px

.border-right-width-05

4px

.border-right-width-1

8px

.border-right-width-105

12px

.border-right-width-2

16px

.border-right-width-205

20px

.border-right-width-3

24px

.border-x-width-0

.border-x-width-1px

1px

.border-x-width-2px

2px

.border-x-width-05

4px

.border-x-width-1

8px

.border-x-width-105

12px

.border-x-width-2

16px

.border-x-width-205

20px

.border-x-width-3

24px

.border-y-width-0

.border-y-width-1px

1px

.border-y-width-2px

2px

.border-y-width-05

4px

.border-y-width-1

8px

.border-y-width-105

12px

.border-y-width-2

16px

.border-y-width-205

20px

.border-y-width-3

24px

Border Radius

Set the radius of the border.

Note - The border-radius class styles do not apply an actual border unless the .border class is also applied to the element

Mixins and Functions

Utility	Mixin	Example
.radius-`radius`	u-radius(`radius`)	@include u-radius('sm')
.radius-top-`radius`	u-radius-top(`radius`)	@include u-radius-top('pill')
.radius-bottom-`radius`	u-radius-bottom(`radius`)	@include u-radius-bottom('pill')
.radius-left-`radius`	u-radius-left(`radius`)	@include u-radius-left('pill')
.radius-right-`radius`	u-radius-right(`radius`)	@include u-radius-right('pill')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
border-radius	True	None	1.61 KB	8.7 KB

.radius-0

.radius-sm

2px

.radius-md

4px

.radius-lg

8px

.radius-pill

99rem

.radius-top-0

.radius-top-sm

2px

.radius-top-md

4px

.radius-top-lg

8px

.radius-top-pill

99rem

.radius-bottom-0

.radius-bottom-sm

2px

.radius-bottom-md

4px

.radius-bottom-lg

8px

.radius-bottom-pill

99rem

.radius-left-0

.radius-left-sm

2px

.radius-left-md

4px

.radius-left-lg

8px

.radius-left-pill

99rem

.radius-right-0

.radius-right-sm

2px

.radius-right-md

4px

.radius-right-lg

8px

.radius-right-pill

99rem

Border Color

Set the color of an item’s borders.

Mixins and Functions

Utility	Mixin	Example
.border-`color`	u-border(`color`)	@include u-border('primary-vivid')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
border-color	True	hover	4.35 KB	23.5 KB

Global Color Tokens

.border-transparent

transparent

.border-black

#000000

.border-white

#ffffff

Basic Color Tokens

.border-teal

#298085

.border-cerulean

#067cbc

.border-cranberry

#e41154

.border-navy

#4177c3

.border-golden

#936f38

Grayscale Color Tokens

.border-gray-5

#f0f0f0

.border-gray-10

#e6e6e6

.border-gray-30

#adadad

.border-gray-50

#757575

.border-gray-70

#454545

.border-gray-90

#1b1b1b

Theme Color Tokens

.border-base-lightest

#f0f0f0

.border-base-lighter

#dfe1e2

.border-base-light

#a9aeb1

.border-base

#71767a

.border-base-dark

#565c65

.border-base-darker

#3d4551

.border-base-darkest

#1b1b1b

.border-ink

#1b1b1b

.border-primary-lighter

#99cae4

.border-primary-light

#3395ca

.border-primary

#007bbd

.border-primary-vivid

#067cbc

.border-primary-dark

#004e7a

.border-primary-darker

#003a57

.border-secondary-lighter

#beebee

.border-secondary-light

#4bbfc6

.border-secondary

#298085

.border-secondary-vivid

#338084

.border-secondary-dark

#1e4c4f

.border-secondary-darker

#17373a

.border-accent-cool-lighter

#d7e5f4

.border-accent-cool-light

#92a9c8

.border-accent-cool

#5478ab

.border-accent-cool-dark

#284976

.border-accent-cool-darker

#06162d

.border-accent-warm-lighter

#fdf2bf

.border-accent-warm-light

#fee685

.border-accent-warm

#face00

.border-accent-warm-dark

#ddaa01

.border-accent-warm-darker

#b38c00

State Color Tokens

.border-error-lighter

#fde2ea

.border-error-light

#f27da2

.border-error

#e41154

.border-error-dark

#b60d43

.border-error-darker

#950b30

.border-warning-lighter

#fdf2bf

.border-warning-light

#ffe396

.border-warning

#ffbe2e

.border-warning-dark

#e5a000

.border-warning-darker

#936f38

.border-success-lighter

#dbf2f3

.border-success-light

#67e4e8

.border-success

#42979a

.border-success-dark

#338084

.border-success-darker

#206b6f

.border-info-lighter

#d4e7f2

.border-info-light

#99cae4

.border-info

#51b8f0

.border-info-dark

#2099df

.border-info-darker

#01679d

.border-disabled-light

#e6e6e6

.border-disabled

#c9c9c9

.border-disabled-dark

#adadad

.border-emergency

#b60d43

.border-emergency-dark

#700824