border-radius
Setting radius of an element’s corners.
Overview
| Class | Declarations |
|---|---|
r:0 | border-radius: 0;
|
r-xs | border-radius: var(--radius-xs);
|
r-sm | border-radius: var(--radius-sm);
|
r-md | border-radius: var(--radius-md);
|
r-lg | border-radius: var(--radius-lg);
|
r-xl | border-radius: var(--radius-xl);
|
r-2xl | border-radius: var(--radius-2xl);
|
r-3xl | border-radius: var(--radius-3xl);
|
r-4xl | border-radius: var(--radius-4xl);
|
rounded | border-radius: 1e9em;
|
round | border-radius: 50%;
aspect-ratio: 1/1;
|
r:<size> | border-radius: <size>;
|
rtl:<size> | border-top-left-radius: <size>;
|
rtr:<size> | border-top-right-radius: <size>;
|
rbl:<size> | border-bottom-left-radius: <size>;
|
rbr:<size> | border-bottom-right-radius: <size>;
|
border-top-left-radius:<size> | border-top-left-radius: <size>;
|
border-top-right-radius:<size> | border-top-right-radius: <size>;
|
border-bottom-left-radius:<size> | border-bottom-left-radius: <size>;
|
border-bottom-right-radius:<size> | border-bottom-right-radius: <size>;
|
Examples
Basic usage
Radius curves the border and background without changing the box dimensions. Compare the same 240 × 96 panel with square corners and a preset radius.
<!-- Square corners --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) r:0 font-md bg-surface-muted text-body box-border"> Preview panel</div><!-- Medium radius --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) r-md font-md bg-surface-muted text-body box-border"> Preview panel</div>Create a pill button
rounded applies a very large radius, creating a pill on this content-sized button. It does not force a square.
<!-- Pill · content-sized --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm rounded b:1px|solid|var(--color-line-base) font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible"> Submit</button>Create an icon button
round sets both a 50% border radius and aspect-ratio:1/1. Give this icon-only button a width and an accessible name; its height follows the square ratio.
<!-- Circle · width determines height --><button id="target" type="button" aria-label="Move up" class="inline-flex items-center justify-center w:48px round p:0 b:1px|solid|var(--color-line-base) bg-surface-base text-blue box-border"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"> <path d="M12 19V5m-6 6 6-6 6 6" /> </svg></button>Use a radius token
r-2xl rounds the box’s own border and background. It does not, by itself, clip a child image. Compare the same child with and without explicit overflow clipping.
<!-- Radius only · child corners stay square --><div id="target" class="w:240px max-w:100% r-2xl bg-surface-muted box-border"> <img src="/demo/landscape.svg" alt="Blue and violet mountains" width="320" height="200" class="block h:auto w:100%" /></div><!-- Radius + overflow hidden · child is clipped --><div id="target" class="overflow:hidden w:240px max-w:100% r-2xl bg-surface-muted box-border"> <img src="/demo/landscape.svg" alt="Blue and violet mountains" width="320" height="200" class="block h:auto w:100%" /></div>Generated CSS
@layer theme { :root, :host { --radius-2xl: 1rem }}@layer utilities { .r-2xl { border-radius: var(--radius-2xl) }}Clipping also affects overflowing content and descendant focus indicators. Add it only when that behavior is intended.
Round individual corners
rtl, rtr, rbl and rbr address the physical top-left, top-right, bottom-left and bottom-right corners.
<!-- Top corners only --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) rtl-xl rtr-xl font-md bg-surface-muted text-body box-border"> Rounded top</div><!-- Opposite corners --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) rbl-xl rtr-xl font-md bg-surface-muted text-body box-border"> Diagonal corners</div>These corner aliases remain physical when writing direction changes.
Apply conditionally
Widen to sm to increase the radius from sm to xl. Print restores square corners. The measured outer dimensions stay the same.
<!-- Small → large radius at sm --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) r-sm font-md bg-surface-muted text-body box-border r:0@print r-xl@screen@sm"> Preview panel</div>Use conditional queries to choose the radius without changing the box’s dimensions.
Customization
Use custom border radius
Define project radius tokens in @theme, then use the same token key in the class. This example adds a named panel radius instead of replacing a preset size.
@theme { --radius-panel: 1.125rem;}<!-- Configured panel radius · 18px --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) r-panel font-md bg-surface-muted text-body box-border"> Preview panel</div>The readout reports the browser’s resolved value. Here 1.125rem becomes 18px at a 16px root size.