Skip to content

Border

TIP

Some border colors vary between light and dark modes. Use the color mode switcher in the site header to see the border colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the chosen mode.

Border width

List of design token names, values and metadata for border-width
NameValue
border-width-base1px

Defined in src/application.json

Refers to dimension.absolute.1

border-width-thick2px

Defined in src/application.json

Refers to dimension.absolute.2

border-width-input-radio--checked6px

Defined in src/components.json

Refers to dimension.absolute.6

Border style

List of design token names, values and metadata for border-style
NameValue
border-style-basesolid

Defined in src/application.json

Refers to border-style.100

border-style-dasheddashed

Defined in src/application.json

Refers to border-style.50

Border color

List of design token names, values and metadata for border-color
NameValue
border-color-base#a2a9b1

Defined in src/application.json

Refers to color.gray400

border-color-subtle#c8ccd1

Defined in src/application.json

Refers to color.gray300

border-color-muted#dadde3

Defined in src/application.json

Refers to color.gray200

border-color-interactive#72777d

Defined in src/application.json

Refers to color.gray500

border-color-disabled#c8ccd1

Defined in src/application.json

Refers to color.gray300

border-color-inverted#fff

Defined in src/application.json

Refers to color.white

border-color-progressive#36c

Defined in src/application.json

Refers to color.blue700

border-color-progressive--hover#4b77d6

Defined in src/application.json

Refers to color.blue600

border-color-progressive--active#233566

Defined in src/application.json

Refers to color.blue900

border-color-progressive--focus#36c

Defined in src/application.json

Refers to color.blue700

border-color-destructive#d73333

Defined in src/application.json

Refers to color.red600

border-color-destructive--hover#fc493b

Defined in src/application.json

Refers to color.red500

border-color-destructive--active#9f3526

Defined in src/application.json

Refers to color.red800

border-color-destructive--focus#36c

Defined in src/application.json

Refers to color.blue700

border-color-error#9f3526

Defined in src/application.json

Refers to color.red800

border-color-error--hover#fc493b

Defined in src/application.json

Refers to color.red500

border-color-warning#987027

Defined in src/application.json

Refers to color.yellow600

border-color-success#196551

Defined in src/application.json

Refers to color.green800

border-color-notice#54595d

Defined in src/application.json

Refers to color.gray600

border-color-content-added#a3d3ff

Defined in src/application.json

Refers to color.blue999

border-color-content-removed#ffe49c

Defined in src/application.json

Refers to color.yellow999

border-color-transparenttransparent

Defined in src/application.json

Refers to color.transparent

border-color-divider#a2a9b1

Defined in src/components.json

Refers to color.gray400

border-color-input--hover#72777d

Defined in src/components.json

Refers to border-color.interactive

border-color-input-binary#72777d

Defined in src/components.json

Refers to border-color.interactive

border-color-input-binary--hover#4b77d6

Defined in src/components.json

Refers to border-color.progressive--hover

border-color-input-binary--active#233566

Defined in src/components.json

Refers to border-color.progressive--active

border-color-input-binary--focus#36c

Defined in src/components.json

Refers to border-color.progressive--focus

border-color-input-binary--checked#36c

Defined in src/components.json

Refers to border-color.progressive

Border (shorthand)

Note, that only most common shorthands are provided given the number of border-color variants.

List of design token names, values and metadata for border
NameValue
border-base1px solid #a2a9b1

Defined in src/application.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.base

border-subtle1px solid #c8ccd1

Defined in src/application.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.subtle

border-progressive1px solid #36c

Defined in src/application.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.progressive

border-destructive1px solid #d73333

Defined in src/application.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.destructive

Border radius

List of design token names, values and metadata for border-radius
NameValue
border-radius-base2px

Defined in src/application.json

Refers to dimension.absolute.2

border-radius-sharp0

Defined in src/application.json

Refers to dimension.0

border-radius-pill9999px

Defined in src/application.json

Refers to dimension.absolute.9999

border-radius-circle50%

Defined in src/application.json

Refers to dimension.half

Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500