Border tokens
  1. Width
  2. Radius
  3. Color
  1. Width
  2. Radius
  3. Color

Width

Ex. Token name Value Use case
--rh-border-width-sm 1px

1px border width; Example: Secondary CTA or Button
--rh-border-width-md 2px

2px border width: Example: Alert
--rh-border-width-lg 3px

3px border width: Example: Expanded Accordion panel

Radius

Ex. Token name Value Use case
--rh-border-radius-sharp 0.0px

Border radius reset
--rh-border-radius-default 3px

3px border radius; Example: Card
--rh-border-radius-pill 64px

Pill border radius; Example: Label

Color

Theme Tokens

--rh-color-border-strong --rh-color-border-subtle --rh-color-border-interactive --rh-color-border-destructive

Strong

Ex. Token name Value Use case
--rh-color-border-strong-on-light #151515

Strong border color (light theme)
--rh-color-border-strong-on-dark #ffffff

Strong border color (dark theme)

Subtle

Ex. Token name Value Use case
--rh-color-border-subtle-on-light #c7c7c7

Subtle border color (light theme)
--rh-color-border-subtle-on-dark #707070

Subtle border color (dark theme)

Interactive

Ex. Token name Value Use case
--rh-color-border-interactive-on-light #0066cc

Interactive border color (light theme)
--rh-color-border-interactive-on-dark #92c5f9

Interactive border color (dark theme)

Destructive

Ex. Token name Value Use case
--rh-color-border-destructive-on-light #b1380b

Destructive border color (light theme)
--rh-color-border-destructive-on-dark #f4784a

Destructive border color (dark theme)

Other libraries

To learn more about our other libraries, visit the getting started page.