Skip to content
On this page

Border

Border width

NameValue
border-width-base1px

Defined in src/codex-base.json

Refers to dimension.6

Refers to unit.system

border-width-thick2px

Defined in src/codex-base.json

Refers to dimension.12

Refers to unit.system

border-width-input-radio--checked6px

Defined in src/codex-components.json

Refers to dimension.35

Refers to unit.system

Border style

NameValue
border-style-basesolid

Defined in src/codex-base.json

Refers to border-style.100

border-style-dasheddashed

Defined in src/codex-base.json

Refers to border-style.50

Border color

NameValue
border-color-base#a2a9b1

Defined in src/codex-base.json

Refers to color.gray400

border-color-interactive#72777d

Defined in src/codex-base.json

Refers to color.gray500

border-color-subtle#c8ccd1

Defined in src/codex-base.json

Refers to color.gray300

border-color-disabled#c8ccd1

Defined in src/codex-base.json

Refers to color.gray300

border-color-inverted#fff

Defined in src/codex-base.json

Refers to color.white

border-color-progressive#36c

Defined in src/codex-base.json

Refers to color.blue600

border-color-progressive--hover#447ff5

Defined in src/codex-base.json

Refers to color.blue500

border-color-progressive--active#2a4b8d

Defined in src/codex-base.json

Refers to color.blue700

border-color-progressive--focus#36c

Defined in src/codex-base.json

Refers to color.blue600

border-color-destructive#d33

Defined in src/codex-base.json

Refers to color.red600

border-color-destructive--hover#ff4242

Defined in src/codex-base.json

Refers to color.red500

border-color-destructive--active#b32424

Defined in src/codex-base.json

Refers to color.red700

border-color-destructive--focus#d33

Defined in src/codex-base.json

Refers to color.red600

border-color-error#b32424

Defined in src/codex-base.json

Refers to color.red700

border-color-warning#ac6600

Defined in src/codex-base.json

Refers to color.yellow700

border-color-success#096450

Defined in src/codex-base.json

Refers to color.green700

border-color-notice#54595d

Defined in src/codex-base.json

Refers to color.gray600

border-color-transparenttransparent

Defined in src/codex-base.json

Refers to color.transparent

border-color-divider#a2a9b1

Defined in src/codex-components.json

Refers to color.gray400

border-color-input--hover#72777d

Defined in src/codex-components.json

Refers to border-color.interactive

border-color-input-binary#72777d

Defined in src/codex-components.json

Refers to border-color.interactive

border-color-input-binary--hover#447ff5

Defined in src/codex-components.json

Refers to border-color.progressive--hover

border-color-input-binary--active#2a4b8d

Defined in src/codex-components.json

Refers to border-color.progressive--active

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

Defined in src/codex-components.json

Refers to border-color.progressive--focus

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

Defined in src/codex-components.json

Refers to border-color.progressive

Border (shorthand)

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

NameValue
border-base1px solid #a2a9b1

Defined in src/codex-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.base

border-subtle1px solid #c8ccd1

Defined in src/codex-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.subtle

border-progressive1px solid #36c

Defined in src/codex-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.progressive

border-destructive1px solid #d33

Defined in src/codex-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.destructive

Border radius

NameValue
border-radius-base2px

Defined in src/codex-base.json

Refers to dimension.12

Refers to unit.system

border-radius-sharp0

Defined in src/codex-base.json

Refers to dimension.0

border-radius-pill9999px

Defined in src/codex-base.json

Refers to dimension.absolute.9999

border-radius-circle50%

Defined in src/codex-base.json

Refers to dimension.half

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

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

NameValue
border-base deprecated 1px solid #a2a9b1

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.base

Deprecated: Legacy `border` token shorthand. Use `border-width-base, border-style-base border-color-base` instead.

border-error deprecated 1px solid #b32424

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.error

Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-error` instead.

border-warning deprecated 1px solid #ac6600

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.warning

Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-warning` instead.

border-success deprecated 1px solid #096450

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.success

Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-success` instead.

border-notice deprecated 1px solid #54595d

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.notice

Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-notice` instead.

border-input-binary deprecated 1px solid #72777d

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-width.base

Refers to border-style.base

Refers to border-color.input-binary

Deprecated: Legacy `border-input-binary` for non-Codex products using WikimediaUI Base. Use sub-property tokens with `border-color-input-binary` instead.

NameValue
border-color-base--hover deprecated #a2a9b1

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.base

Deprecated: Use `border-color-base` instead.

border-color-base--active deprecated #72777d

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.interactive

Deprecated: Use `border-color-interactive` instead.

border-color-base--focus deprecated #36c

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive--focus

Deprecated: Use `border-color-progressive--focus` instead.

border-color-base--disabled deprecated #c8ccd1

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.disabled

Deprecated: Use `border-color-disabled` instead.

border-color-filled--disabled deprecated #fff

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.inverted

Deprecated: Use `border-color-inverted` instead.

border-color-neutral deprecated #a2a9b1

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.base

Deprecated: Use `border-color-base` instead.

border-color-neutral--hover deprecated #a2a9b1

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.base

Deprecated: Use `border-color-base` instead.

border-color-neutral--active deprecated #72777d

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.interactive

Deprecated: Use `border-color-interactive` instead.

border-color-neutral--focus deprecated #36c

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive--focus

Deprecated: Use `border-color-progressive--focus` instead.

border-color-inset--focus deprecated #fff

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.inverted

Deprecated: Use `border-color-inverted` instead.

border-color-primary deprecated #36c

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive

Deprecated: Use `border-color-progressive` instead.

border-color-primary--hover deprecated #447ff5

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive--hover

Deprecated: Use `border-color-progressive--hover` instead.

border-color-primary--active deprecated #2a4b8d

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive--active

Deprecated: Use `border-color-progressive--active` instead.

border-color-primary--focus deprecated #36c

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to border-color.progressive--focus

Deprecated: Use `border-color-progressive--focus` instead.