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%;

Conditionally apply

Apply styles based on different states using selectors and conditional queries.

<div class="border-radius:10:hover border-radius:10@sm border-radius:10@dark border-radius:10@print"></div>
Syntax
Border Color

Setting the color of an element’s border.

Syntax
Border Style

Setting the line style for an element’s border.

© Aoyue Design LLC.