CodexBorder
Border width
| Name | Value |
|---|---|
| border-width-base | 1px Defined in Refers to Refers to |
| border-width-thick | 2px Defined in Refers to Refers to |
| border-width-input-radio--checked | 6px Defined in Refers to Refers to |
Border style
| Name | Value |
|---|---|
| border-style-base | solid Defined in Refers to |
| border-style-dashed | dashed Defined in Refers to |
Border color
| Name | Value |
|---|---|
| border-color-base | #a2a9b1 Defined in Refers to |
| border-color-interactive | #72777d Defined in Refers to |
| border-color-subtle | #c8ccd1 Defined in Refers to |
| border-color-disabled | #c8ccd1 Defined in Refers to |
| border-color-inverted | #fff Defined in Refers to |
| border-color-progressive | #36c Defined in Refers to |
| border-color-progressive--hover | #447ff5 Defined in Refers to |
| border-color-progressive--active | #2a4b8d Defined in Refers to |
| border-color-progressive--focus | #36c Defined in Refers to |
| border-color-destructive | #d33 Defined in Refers to |
| border-color-destructive--hover | #ff4242 Defined in Refers to |
| border-color-destructive--active | #b32424 Defined in Refers to |
| border-color-destructive--focus | #d33 Defined in Refers to |
| border-color-error | #b32424 Defined in Refers to |
| border-color-warning | #ac6600 Defined in Refers to |
| border-color-success | #096450 Defined in Refers to |
| border-color-notice | #54595d Defined in Refers to |
| border-color-transparent | transparent Defined in Refers to |
| border-color-divider | #a2a9b1 Defined in Refers to |
| border-color-input--hover | #72777d Defined in Refers to |
| border-color-input-binary | #72777d Defined in Refers to |
| border-color-input-binary--hover | #447ff5 Defined in Refers to |
| border-color-input-binary--active | #2a4b8d Defined in Refers to |
| border-color-input-binary--focus | #36c Defined in Refers to |
| border-color-input-binary--checked | #36c Defined in Refers to |
Border (shorthand)
Note, that only most common shorthands are provided given the number of border-color variants.
| Name | Value |
|---|---|
| border-base | 1px solid #a2a9b1 Defined in Refers to Refers to Refers to |
| border-subtle | 1px solid #c8ccd1 Defined in Refers to Refers to Refers to |
| border-progressive | 1px solid #36c Defined in Refers to Refers to Refers to |
| border-destructive | 1px solid #d33 Defined in Refers to Refers to Refers to |
Border radius
| Name | Value |
|---|---|
| border-radius-base | 2px Defined in Refers to Refers to |
| border-radius-sharp | 0 Defined in Refers to |
| border-radius-pill | 9999px Defined in Refers to |
| border-radius-circle | 50% Defined in Refers to 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.
| Name | Value |
|---|---|
| border-base deprecated | 1px solid #a2a9b1 Defined in Refers to Refers to Refers to Deprecated: Legacy `border` token shorthand. Use `border-width-base, border-style-base border-color-base` instead. |
| border-error deprecated | 1px solid #b32424 Defined in Refers to Refers to Refers to Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-error` instead. |
| border-warning deprecated | 1px solid #ac6600 Defined in Refers to Refers to Refers to Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-warning` instead. |
| border-success deprecated | 1px solid #096450 Defined in Refers to Refers to Refers to Deprecated: Legacy `border` token shorthand. Use `border-width-base border-style-base border-color-success` instead. |
| border-notice deprecated | 1px solid #54595d Defined in Refers to Refers to Refers to 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 Refers to Refers to Refers to Deprecated: Legacy `border-input-binary` for non-Codex products using WikimediaUI Base. Use sub-property tokens with `border-color-input-binary` instead. |
| Name | Value |
|---|---|
| border-color-base--hover deprecated | #a2a9b1 Defined in Refers to Deprecated: Use `border-color-base` instead. |
| border-color-base--active deprecated | #72777d Defined in Refers to Deprecated: Use `border-color-interactive` instead. |
| border-color-base--focus deprecated | #36c Defined in Refers to Deprecated: Use `border-color-progressive--focus` instead. |
| border-color-base--disabled deprecated | #c8ccd1 Defined in Refers to Deprecated: Use `border-color-disabled` instead. |
| border-color-filled--disabled deprecated | #fff Defined in Refers to Deprecated: Use `border-color-inverted` instead. |
| border-color-neutral deprecated | #a2a9b1 Defined in Refers to Deprecated: Use `border-color-base` instead. |
| border-color-neutral--hover deprecated | #a2a9b1 Defined in Refers to Deprecated: Use `border-color-base` instead. |
| border-color-neutral--active deprecated | #72777d Defined in Refers to Deprecated: Use `border-color-interactive` instead. |
| border-color-neutral--focus deprecated | #36c Defined in Refers to Deprecated: Use `border-color-progressive--focus` instead. |
| border-color-inset--focus deprecated | #fff Defined in Refers to Deprecated: Use `border-color-inverted` instead. |
| border-color-primary deprecated | #36c Defined in Refers to Deprecated: Use `border-color-progressive` instead. |
| border-color-primary--hover deprecated | #447ff5 Defined in Refers to Deprecated: Use `border-color-progressive--hover` instead. |
| border-color-primary--active deprecated | #2a4b8d Defined in Refers to Deprecated: Use `border-color-progressive--active` instead. |
| border-color-primary--focus deprecated | #36c Defined in Refers to Deprecated: Use `border-color-progressive--focus` instead. |