Border tokens
Border
Width
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-border-width-sm |
Click to copy
1px |
1px border width; Example: Secondary CTA or Button |
var(--rh-border-width-sm, 1px)
https://ux.redhat.com/tokens/border/#rh-border-width-sm
|
|
Click to copy
--rh-border-width-md |
Click to copy
2px |
2px border width: Example: Alert |
var(--rh-border-width-md, 2px)
https://ux.redhat.com/tokens/border/#rh-border-width-md
|
|
Click to copy
--rh-border-width-lg |
Click to copy
3px |
3px border width: Example: Expanded Accordion panel |
var(--rh-border-width-lg, 3px)
https://ux.redhat.com/tokens/border/#rh-border-width-lg
|
Radius
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-border-radius-sharp |
Click to copy
0.0px |
Border radius reset |
var(--rh-border-radius-sharp, 0.0px)
https://ux.redhat.com/tokens/border/#rh-border-radius-sharp
|
|
Click to copy
--rh-border-radius-default |
Click to copy
3px |
3px border radius; Example: Card |
var(--rh-border-radius-default, 3px)
https://ux.redhat.com/tokens/border/#rh-border-radius-default
|
|
Click to copy
--rh-border-radius-pill |
Click to copy
64px |
Pill border radius; Example: Label |
var(--rh-border-radius-pill, 64px)
https://ux.redhat.com/tokens/border/#rh-border-radius-pill
|
Border
Strong
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-border-strong-on-light |
Click to copy
#151515 |
Strong border color (light theme) |
var(--rh-color-border-strong-on-light, #151515)
https://ux.redhat.com/tokens/border/#rh-color-border-strong-on-light
|
|
Click to copy
--rh-color-border-strong-on-dark |
Click to copy
#ffffff |
Strong border color (dark theme) |
var(--rh-color-border-strong-on-dark, #ffffff)
https://ux.redhat.com/tokens/border/#rh-color-border-strong-on-dark
|
Subtle
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-border-subtle-on-light |
Click to copy
#c7c7c7 |
Subtle border color (light theme) |
var(--rh-color-border-subtle-on-light, #c7c7c7)
https://ux.redhat.com/tokens/border/#rh-color-border-subtle-on-light
|
|
Click to copy
--rh-color-border-subtle-on-dark |
Click to copy
#707070 |
Subtle border color (dark theme) |
var(--rh-color-border-subtle-on-dark, #707070)
https://ux.redhat.com/tokens/border/#rh-color-border-subtle-on-dark
|
Interactive
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-border-interactive-on-light |
Click to copy
#0066cc |
Interactive border color (light theme) |
var(--rh-color-border-interactive-on-light, #0066cc)
https://ux.redhat.com/tokens/border/#rh-color-border-interactive-on-light
|
|
Click to copy
--rh-color-border-interactive-on-dark |
Click to copy
#92c5f9 |
Interactive border color (dark theme) |
var(--rh-color-border-interactive-on-dark, #92c5f9)
https://ux.redhat.com/tokens/border/#rh-color-border-interactive-on-dark
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit this page.
