Radius

Border radius rounds the corners of UI elements, providing an approachable aesthetic.

View in Figma

Published: Last updated:

Border radius defines the rounded corners of elements, creating a softer, more approachable look while maintaining consistency across UI components.

Overview

The size of a component determines its border radius. Larger components, which may contain other elements, typically have a larger border radius. Each component has an appropriate border radius applied by default.

Border radius scale

Token
rem
px
Example
$border-radius-xs 0.25 4
$border-radius-sm 0.375 6
$border-radius-md 0.5 8
$border-radius-lg 1 16
$border-radius-xl 1.5 24
$border-radius-full 2 32