Borders & Outlines
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
Use tokens like r:xs, r:sm, and r:md to set the border radius of an element.
r:xs
r:sm
r:md
r:lg
r:xl
r:2xl
r:3xl
r:4xl
rounded
round
<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>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>Use a radius token
Use r:* to apply a border radius token or size directly.
<div class="r:md"> Rounded panel</div>Generated CSS
@layer theme { :root { --radius-md: .375rem }}@layer utilities { .r\:md { border-radius: var(--radius-md) }}Round individual corners
Use CSS corner properties or corner shorthands when only part of the element should be rounded.
<div class="rtl:md rtr:md"> Rounded top</div>Use rtl, rtr, rbl, and rbr for individual corners.
<div class="rtr:md rbl:sm"> Rounded corners</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="r:md:hover r:lg@sm r:0@print">...</div>Customization
Use custom border radius
Customize your border radius tokens by defining theme tokens.
@theme { --radius-xs: 0.125rem; --radius-sm: 0.25rem; }Apply the defined radius variables.
<div class="r:sm">...</div>