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
Name | Value |
---|---|
border-width-base | 1px |
border-width-thick | 2px |
border-width-input-radio--checked | 6px |
Border style
Name | Value |
---|---|
border-style-base | solid |
border-style-dashed | dashed |
Border color
Name | Value |
---|---|
border-color-base | #a2a9b1 |
border-color-subtle | #c8ccd1 |
border-color-muted | #dadde3 |
border-color-interactive | #72777d |
border-color-disabled | #c8ccd1 |
border-color-inverted | #fff |
border-color-progressive | #36c |
border-color-progressive--hover | #4b77d6 |
border-color-progressive--active | #233566 |
border-color-progressive--focus | #36c |
border-color-destructive | #d73333 |
border-color-destructive--hover | #fc493b |
border-color-destructive--active | #9f3526 |
border-color-destructive--focus | #36c |
border-color-error | #9f3526 |
border-color-error--hover | #fc493b |
border-color-warning | #987027 |
border-color-success | #196551 |
border-color-notice | #54595d |
border-color-content-added | #a3d3ff |
border-color-content-removed | #ffe49c |
border-color-transparent | transparent |
border-color-divider | #a2a9b1 |
border-color-input--hover | #72777d |
border-color-input-binary | #72777d |
border-color-input-binary--hover | #4b77d6 |
border-color-input-binary--active | #233566 |
border-color-input-binary--focus | #36c |
border-color-input-binary--checked | #36c |
Border (shorthand)
Note, that only most common shorthands are provided given the number of border-color variants.
Name | Value |
---|---|
border-base | 1px solid #a2a9b1 |
border-subtle | 1px solid #c8ccd1 |
border-progressive | 1px solid #36c |
border-destructive | 1px solid #d73333 |
Border radius
Name | Value |
---|---|
border-radius-base | 2px |
border-radius-sharp | 0 |
border-radius-pill | 9999px |
border-radius-circle | 50% |