Syntax

border-color

Setting the color of an element’s border.

Overview

ClassDeclarations
b:<color>border-color: <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;

Examples

Apply conditionally

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

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

Customization

Use custom border colors

Add a color to the line variable namespace.

export default {    modes: {        light: {            color: {                line: {                    light: '$slate-60/.2'                 }            }        },        dark: {            color: {                line: {                    light: '$gray-30/.2'                 }            }        }    }}

Apply the defined line-* variables using the inherited rules border-top-color, border-bottom-color, border-left-color, border-right-color, border-x-color, border-y-color, border-color, border-top, border-bottom, border-left, border-right, border-x, border-y, border, outline-color, outline.

<div class="outline:neutral"></div> <div class="outline:line-neutral">equals</div><div class="outline:$line-neutral">equals</div>

  • Master UI


© 2025 Aoyue Design LLC.MIT License
Trademark Policy