Syntax
border-radius🚧
Setting radius of an element’s corners.
🚧This page is still under construction and some content may not be complete.
Overview
Class | Declarations |
---|---|
r:radius | border-radius: 3004.5077461891724rem;
|
rt:radius | border-top-left-radius: 3005.5930040358935rem;
border-top-right-radius: 3005.5930040358935rem;
|
rb:radius | border-bottom-left-radius: 3006.411618877157rem;
border-bottom-right-radius: 3006.411618877157rem;
|
rl:radius | border-top-left-radius: 3007.5286084515456rem;
border-bottom-left-radius: 3007.5286084515456rem;
|
rr:radius | border-top-right-radius: 3008.484661300164rem;
border-bottom-right-radius: 3008.484661300164rem;
|
rtl:radius | border-top-left-radius: 3009.6600371158142rem;
|
rtr:radius | border-top-right-radius: 3010.6831441665754rem;
|
rbl:radius | border-bottom-left-radius: 3011.6567425646635rem;
|
rbr:radius | border-bottom-right-radius: 3012.7527811815644rem;
|
rounded | border-radius: 1e9em;
|
round | border-radius: 50%;
aspect-ratio: 1/1;
|
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="border-radius:10:hover border-radius:10@sm border-radius:10@dark border-radius:10@print">…</div>