Syntax
border-color
Setting the color of an element’s border.
Overview
| Class | Declarations |
|---|---|
b:<color> | border-color: <color>;
|
b:current | border-color: currentColor;
|
bt:current | border-top-color: currentColor;
|
bb:current | border-bottom-color: currentColor;
|
bl:current | border-left-color: currentColor;
|
br:current | border-right-color: currentColor;
|
bx:current | border-left-color: currentColor;
border-right-color: currentColor;
|
by:current | border-top-color: currentColor;
border-bottom-color: currentColor;
|
b:transparent | border-color: transparent;
|
bt:transparent | border-top-color: transparent;
|
bb:transparent | border-bottom-color: transparent;
|
bl:transparent | border-left-color: transparent;
|
br:transparent | border-right-color: transparent;
|
bx:transparent | border-left-color: transparent;
border-right-color: transparent;
|
by:transparent | border-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>