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

We don’t currently offer border radius tokens or Figma styles, but as general guidance, the size of the component determines the border radius.

This is how we use border radius in Helios components.

Size Value Examples
Extra small 3px Checkbox
Small 5px Badge, Button, Form Components
Medium 6px Card, RadioCard, Alert, Toast
Large 8px Modal