Border tokens
Border#
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 |
|
Border#
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) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
