Corner Radius

Corner radius defines the roundness of UI elements' corners.

Overview

The border radius system defines the curvature of UI elements' corners, helping establish a consistent visual language across components.

Use tokens like r:xs, r:sm, and r:md to set the border radius of an element.

<div class="r:xs"></div><div class="r:sm"></div><div class="r:md"></div><div class="r:lg"></div><div class="r:xl"></div><div class="r:2xl"></div><div class="r:3xl"></div><div class="r:4xl"></div><div class="rounded"></div><div class="round"></div>

Each radius token — from r:xs to r:4xl — represents a progressively larger corner rounding. These are designed to support various use cases:

• r:xs to r:md are ideal for subtle rounding in input fields, buttons, and cards.
• r:lg to r:4xl suit more expressive UI elements such as modals, banners, or illustrations.

For semantic shortcuts:

• rounded applies a full border radius along the horizontal/vertical axis, commonly used for tags, buttons, or badges.
• round applies a full (pill or circle) border radius, commonly used for avatars, badges, or circular buttons.

By standardizing radius values, the system ensures visual harmony, simplifies design decisions, and promotes scalable theming across products.

Namespace for corner radius

The corner radius system is defined in the variables.border-radius namespace. This namespace includes a set of utility variables that can be used to apply corner radius styles to elements.

The following rules share the same namespace:

• border-radius for the default border radius
• border-top-left-radius for the top left corner
• border-top-right-radius for the top right corner
• border-bottom-left-radius for the bottom left corner
• border-bottom-right-radius for the bottom right corner

See the border radius reference for more details on how to add custom corner radius tokens.

Create a pill button

Use the rounded token to create a pill button.

<button class="rounded …">Submit</button>

Create an icon button

Use the round token to create an icon button.

<button class="round …">    <svg>…</svg></button>