#Border radius

Consistent border radius values help the UI feel cohesive. Use the three tokens below unless you have a strong reason to introduce a custom value.

#Medium (4px)

Use for inputs, buttons, toasts, and small cards.

.element
  radius(m)

#Large (8px)

Use for large cards, tables, and modal dialogs.

.element
  radius(l)

#Circle

Use for avatars, badges, and notification dots.

.element
  radius(circle)