Skip to content
On this page

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

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

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#d33

Defined in src/codex-base.json

Refers to color.red600

border-color-warning#fc3

Defined in src/codex-base.json

Refers to color.yellow600

border-color-success#14866d

Defined in src/codex-base.json

Refers to color.green700

border-color-notice#a2a9b1

Defined in src/codex-base.json

Refers to color.gray400

border-color-transparenttransparent

Defined in src/codex-base.json

Refers to color.transparent

border-color-base--hover deprecated #a2a9b1

Defined in src/codex-base.json

Refers to color.gray400

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

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

Defined in src/codex-base.json

Refers to color.gray500

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

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

Defined in src/codex-base.json

Refers to color.blue600

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

border-color-base--disabled deprecated #c8ccd1

Defined in src/codex-base.json

Refers to color.gray300

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

border-color-filled--disabled deprecated #fff

Defined in src/codex-base.json

Refers to color.white

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

border-color-neutral deprecated #a2a9b1

Defined in src/codex-base.json

Refers to color.gray400

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

border-color-neutral--hover deprecated #a2a9b1

Defined in src/codex-base.json

Refers to color.gray400

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

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

Defined in src/codex-base.json

Refers to color.gray500

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

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

Defined in src/codex-base.json

Refers to color.blue600

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

border-color-inset--focus deprecated #fff

Defined in src/codex-base.json

Refers to color.inverted

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

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.base--active

border-color-input-binary#72777d

Defined in src/codex-components.json

Refers to border-color.base--active

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-color-primary deprecated #36c

Defined in src/codex-components.json

Refers to border-color.progressive

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

Defined in src/codex-components.json

Refers to border-color.progressive--hover

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

Defined in src/codex-components.json

Refers to border-color.progressive--active

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

Defined in src/codex-components.json

Refers to border-color.progressive--focus

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-circle100%

Defined in src/codex-base.json

Refers to dimension.full