Corner Radius
Use radius tokens, pill shortcuts, circular shapes, and custom corner scales consistently.
Overview
Corner radius defines the shape language of surfaces, controls, media, and badges. It tells users whether an element is dense and precise, soft and spacious, pill-shaped, or circular.
Master CSS maps repeated shape decisions to the radius namespace. Use tokens such as r:sm, r:lg, and r:2xl for shared UI curvature instead of repeating raw values across markup. Use rounded and round when the shape itself is the decision.
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>Choose a radius token
Start with the role of the element, then choose the smallest radius that communicates that role. Radius should reinforce hierarchy and interaction density instead of becoming decoration.
| Token | Class | Role |
|---|---|---|
--radius-xs | r:xs | Compact inputs, small buttons, dense cells. |
--radius-sm | r:sm | Buttons, menus, toolbar controls. |
--radius-md | r:md | Form fields, dense cards, reusable UI. |
--radius-lg | r:lg | Cards, popovers, media frames. |
--radius-xl | r:xl | Spacious cards, panels, dialogs. |
--radius-2xl | r:2xl | Modals, drawers, focused surfaces. |
--radius-3xl | r:3xl | Banners, illustrations, large media. |
--radius-4xl | r:4xl | Hero panels, oversized feature surfaces. |
rounded | Tags, segmented controls, pill buttons. | |
round | Avatars, icon buttons, indicators. |
Use related tokens for related surfaces. A card, its nested media, and an action group can share the same radius or step down one level for nested elements.
Use radius tokens
Use r:<token> for all corners. The utility resolves values from radius-* tokens and emits a stable border-radius: var(--radius-*) declaration.
<input class="r:md" /><article class="r:lg"> ...</article><img class="r:2xl" alt="" />Generated CSS
@layer theme { :root { --radius-md: .375rem; --radius-lg: .5rem; --radius-2xl: 1rem }}@layer utilities { .r\:2xl { border-radius: var(--radius-2xl) } .r\:lg { border-radius: var(--radius-lg) } .r\:md { border-radius: var(--radius-md) }}Use r:* in product markup. Use the explicit border-radius:* form when documenting native property mapping or when surrounding code benefits from the native property name.
Namespace for corner radius
The radius variable namespace is shared by the all-corner shorthand, physical corner aliases, and native logical corner radius properties.
| Group | Utility keys | Description |
|---|---|---|
| All corners | r, border-radius | Apply the same radius token to the whole shape. |
| Physical corners | rtl, rtr, rbr, rbl, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius | Target visual corners when the design is physical rather than writing-mode aware. |
| Logical corners | border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius | Target flow-relative corners for directional layouts. |
This lets radius utilities use scale or project token names such as md, card, or panel without repeating the radius- prefix.
Use shape shortcuts
Use rounded when the element should behave like a pill, regardless of its width. Use round when the element should be circular.
Use the rounded token to create a pill button.
<button class="rounded …">Submit</button>Use the round token to create an icon button.
<button class="round …"> <svg>…</svg></button>Generated CSS
@layer utilities { .round { border-radius: 50%; aspect-ratio: 1/1 } .rounded { border-radius: 1e9em }}Use shape shortcuts for semantic shapes. Use r:* when the element should stay on the shared radius scale.
Round individual corners
Use corner shorthands when only part of a surface should be rounded. This is useful for grouped controls, attached panels, split media, and directional layouts.
<section class="rtl:lg rtr:lg"> Rounded top</section><div class="rtr:md rbl:sm"> Offset corners</div>Generated CSS
@layer theme { :root { --radius-lg: .5rem; --radius-md: .375rem; --radius-sm: .25rem }}@layer utilities { .rbl\:sm { border-bottom-left-radius: var(--radius-sm) } .rtl\:lg { border-top-left-radius: var(--radius-lg) } .rtr\:lg { border-top-right-radius: var(--radius-lg) } .rtr\:md { border-top-right-radius: var(--radius-md) }}Use rtl, rtr, rbl, and rbr for individual corners. Use native property names such as border-top-left-radius:* only when the code needs the native property spelled out.
Customize radius tokens
Override radius variables when your product needs sharper controls, softer panels, or a named shape decision. Keep token names descriptive so markup reads as a design choice.
@theme { --radius-crisp: 0.25rem; --radius-card: 0.75rem; --radius-panel: 1.25rem;}<button class="r:crisp">Save</button><article class="r:card">...</article><section class="r:panel">...</section>Promote repeated raw values into the radius scale. Keep one-off measured geometry as raw values such as r:1px or r:2x until it becomes a reusable shape.
Avoid radius noise
Every nested surface uses a larger radius than its parent.
<article class="r:lg"> <img class="r:2xl" alt="" /> <button class="r:4xl">Open</button></article>Nested surfaces share the parent radius or step down.
<article class="r:lg"> <img class="r:lg" alt="" /> <button class="r:md">Open</button></article>Numeric token names are hard to distinguish from raw values.
@theme { --radius-1: 0.25rem; --radius-2: 0.5rem;}Name tokens by scale or role.
@theme { --radius-sm: 0.25rem; --radius-card: 0.75rem;}