Border tokens
Border#
Width#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 1px border width; Example: Secondary CTA or Button |
var(--rh-border-width-sm, 1px)
|
|||
| 2px border width: Example: Alert |
var(--rh-border-width-md, 2px)
|
|||
| 3px border width: Example: Expanded Accordion panel |
var(--rh-border-width-lg, 3px)
|
Radius#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Border radius reset |
var(--rh-border-radius-sharp, 0.0px)
|
|||
| 3px border radius; Example: Card |
var(--rh-border-radius-default, 3px)
|
|||
| Pill border radius; Example: Label |
var(--rh-border-radius-pill, 64px)
|
Border#
Strong#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Strong border color (light theme) |
var(--rh-color-border-strong-on-light, #151515)
|
|||
| Strong border color (dark theme) |
var(--rh-color-border-strong-on-dark, #ffffff)
|
Subtle#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Subtle border color (light theme) |
var(--rh-color-border-subtle-on-light, #c7c7c7)
|
|||
| Subtle border color (dark theme) |
var(--rh-color-border-subtle-on-dark, #707070)
|
Interactive#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Interactive border color (light theme) |
var(--rh-color-border-interactive-on-light, #0066cc)
|
|||
| Interactive border color (dark theme) |
var(--rh-color-border-interactive-on-dark, #73bcf7)
|
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
