The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Borders

Borders define and separate content visually. They can be used alone or in combination with elevation.

Border radius

This is how we use border radius in Helios components.

Examples of Border Radius values

When using these tokens for your own components and patterns, consider the size and prominence of the element relative to the example Helios components.

How to use these styles

You can apply a border radius to a UI element via design tokens.

Design tokens

Use the border radius design tokens directly in your CSS definitions.

.your-selector {
  border-radius: var(--token-border-radius-medium);
}

Available CSS variables

Radius variables