Syntax
border-radius
Setting radius of an element’s corners.
Overview
| Class | Declarations |
|---|---|
r:0 | border-radius: 0rem;
|
r:xs | border-radius: 0.125rem;
|
r:sm | border-radius: 0.25rem;
|
r:md | border-radius: 0.375rem;
|
r:lg | border-radius: 0.5rem;
|
r:xl | border-radius: 0.75rem;
|
r:2xl | border-radius: 1rem;
|
r:3xl | border-radius: 1.5rem;
|
r:4xl | border-radius: 2rem;
|
rounded | border-radius: 1e9em;
|
round | border-radius: 50%;
aspect-ratio: 1/1;
|
r:<size> | border-radius: <size>/16rem;
|
rt:<size> | border-top-left-radius: <size>/16rem;
border-top-right-radius: <size>/16rem;
|
rb:<size> | border-bottom-left-radius: <size>/16rem;
border-bottom-right-radius: <size>/16rem;
|
rl:<size> | border-top-left-radius: <size>/16rem;
border-bottom-left-radius: <size>/16rem;
|
rr:<size> | border-top-right-radius: <size>/16rem;
border-bottom-right-radius: <size>/16rem;
|
rtl:<size> | border-top-left-radius: <size>/16rem;
|
rtr:<size> | border-top-right-radius: <size>/16rem;
|
rbl:<size> | border-bottom-left-radius: <size>/16rem;
|
rbr:<size> | border-bottom-right-radius: <size>/16rem;
|
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 a icon button
Use the round token to create an icon button.
<button class="round …"> <svg>…</svg></button>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="r:md:hover r:md@sm r:md@dark r:md@print">…</div>Customization
Use custom border radius
Customize your border radius tokens by defining variables.
export default { variables: { 'border-radius': { xs: 2, sm: 4, } }}Apply the defined border-radius variables.
<div class="r:sm">…</div>