Border Style

Setting the line style for an element’s border.

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


b:styleborder: style;
bt:styleborder-top: style;
bb:styleborder-bottom: style;
bl:styleborder-left: style;
br:styleborder-right: style;
bx:styleborder-left: style; border-right: style;
by:styleborder-top: style; border-bottom: style;
b:noneborder-style: none;
b:hiddenborder-style: hidden;
b:dottedborder-style: dotted;
b:dashedborder-style: dashed;
b:solidborder-style: solid;
b:doubleborder-style: double;
b:grooveborder-style: groove;
b:ridgeborder-style: ridge;
b:insetborder-style: inset;
b:outsetborder-style: outset;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="border-style:solid:hover border-style:solid@sm border-style:solid@dark border-style:solid@print"></div>
Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.