Borders & Outlines
border-color
Setting the color of an element’s border.
Overview
| Class | Declarations |
|---|---|
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-inline-color: currentColor;
|
by:current | border-block-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-inline-color: transparent;
|
by:transparent | border-block-color: transparent;
|
border-color:currentColor | border-color: currentColor;
|
border-color:transparent | border-color: transparent;
|
border-color:<color> | border-color: <color>;
|
b:<color> | border-color: <color>;
|
Examples
Set border color
Use border-color:* when only the border color should change.
<div class="b:1px|solid border-color:blue-60"> Primary border</div>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .border-color\:blue-60 { border-color: var(--color-blue-60) }}Use side-specific color utilities
Use side aliases when only one edge should change.
<div class="b:1px|solid|gray-20 bt:transparent"> No top border color</div>Follow the current text color
Use border-color:currentColor when the border should track the foreground color.
<button class="b:1px|solid border-color:currentColor fg:blue-60"> Current color</button>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-color:blue-60:hover border-color:transparent@print border-color:currentColor@sm">...</div>Customization
Customize line colors
Define a project line color token when separators need a semantic, mode-aware value.
@theme light { --color-line-divider: --alpha(var(--color-slate-60) / 20%); }@theme dark { --color-line-divider: --alpha(var(--color-gray-30) / 20%); }Apply the token to a border color.
<div class="b:1px|solid border-color:divider"></div>