Syntax

Border Radius

Setting radius of an element’s corners.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
r:radiusborder-radius: radius;
rt:radiusborder-top-left-radius: radius; border-top-right-radius: radius;
rb:radiusborder-bottom-left-radius: radius; border-bottom-right-radius: radius;
rl:radiusborder-top-left-radius: radius; border-bottom-left-radius: radius;
rr:radiusborder-top-right-radius: radius; border-bottom-right-radius: radius;
rtl:radius / rlt:radiusborder-top-left-radius: radius;
rtr:radius / rrt:radiusborder-top-right-radius: radius;
rbl:radius / rlb:radiusborder-bottom-left-radius: radius;
rbr:radius / rrb:radiusborder-bottom-right-radius: radius;
roundedborder-radius: 1e9em;
roundborder-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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.