Syntax

Border Color

Setting the color of an element’s border.

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

Overview

ClassDeclarations
b:colorborder: color;
b:currentborder-color: currentColor;
bt:currentborder-top-color: currentColor;
bb:currentborder-bottom-color: currentColor;
bl:currentborder-left-color: currentColor;
br:currentborder-right-color: currentColor;
bx:currentborder-left-color: currentColor; border-right-color: currentColor;
by:currentborder-top-color: currentColor; border-bottom-color: currentColor;
b:transparentborder-color: transparent;
bt:transparentborder-top-color: transparent;
bb:transparentborder-bottom-color: transparent;
bl:transparentborder-left-color: transparent;
br:transparentborder-right-color: transparent;
bx:transparentborder-left-color: transparent; border-right-color: transparent;
by:transparentborder-top-color: transparent; border-bottom-color: transparent;

Conditionally apply

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

<div class="border-color:blue-60:hover border-color:blue-60@sm border-color:blue-60@dark border-color:blue-60@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.