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>