Border

Border width

List of design token names, values and metadata for `border-width`
Name	Value
border-width-base	`1px` Defined in `src/codex-base.json` Refers to `dimension.6` Refers to `unit.system`
border-width-thick	`2px` Defined in `src/codex-base.json` Refers to `dimension.12` Refers to `unit.system`
border-width-input-radio--checked	`6px` Defined in `src/codex-components.json` Refers to `dimension.35` Refers to `unit.system`

Border style

List of design token names, values and metadata for `border-style`
Name	Value
border-style-base	`solid` Defined in `src/codex-base.json` Refers to `border-style.100`
border-style-dashed	`dashed` Defined in `src/codex-base.json` Refers to `border-style.50`

Border color

List of design token names, values and metadata for `border-color`
Name	Value
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	`#d73333` 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	`#d73333` 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-error--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
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-transparent	`transparent` 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.

List of design token names, values and metadata for `border`
Name	Value
border-base	`1px solid #a2a9b1` Defined in `src/codex-base.json` Refers to `border-width.base` Refers to `border-style.base` Refers to `border-color.base`
border-subtle	`1px solid #c8ccd1` Defined in `src/codex-base.json` Refers to `border-width.base` Refers to `border-style.base` Refers to `border-color.subtle`
border-progressive	`1px solid #36c` Defined in `src/codex-base.json` Refers to `border-width.base` Refers to `border-style.base` Refers to `border-color.progressive`
border-destructive	`1px solid #d73333` Defined in `src/codex-base.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`
Name	Value
border-radius-base	`2px` Defined in `src/codex-base.json` Refers to `dimension.12` Refers to `unit.system`
border-radius-sharp	`0` Defined in `src/codex-base.json` Refers to `dimension.0`
border-radius-pill	`9999px` Defined in `src/codex-base.json` Refers to `dimension.absolute.9999`
border-radius-circle	`50%` 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.

List of design token names, values and metadata for `border`
Name	Value
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.

List of design token names, values and metadata for `border-color`
Name	Value
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.

Border ​

Border width ​

Border style ​

Border color ​

Border (shorthand) ​

Border radius ​

Deprecated token aliases ​