Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

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 the getting started page.
© 2021-2024 Red Hat, Inc. Deploys by Netlify