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;
|
border-color:transparent | border-color: transparent;
|
border-top-color:transparent | border-top-color: transparent;
|
border-bottom-color:transparent | border-bottom-color: transparent;
|
border-left-color:transparent | border-left-color: transparent;
|
border-right-color:transparent | border-right-color: transparent;
|
border-inline-color:transparent | border-inline-color: transparent;
|
border-block-color:transparent | border-block-color: transparent;
|
border-color:currentColor | border-color: currentColor;
|
border-color:<color> | border-color: <color>;
|
b:<color> | border: <color>;
|
Examples
Set border color
A color needs a visible border width and style. Compare identical 2px solid borders; only their color changes.
<!-- Primary · blue --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid border-color-blue font-md bg-surface-muted text-body box-border"> Preview panel</div><!-- Comparison · violet --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid border-color-violet font-md bg-surface-muted text-body box-border"> Preview panel</div>Generated CSS
@layer theme { :root, :host { --color-blue: var(--color-blue-60); --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-50: oklch(58.22% .2279 263.9) } @media (prefers-color-scheme:light) { :root { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:light) { :host { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:dark) { :root { --color-blue: var(--color-blue-50) } } @media (prefers-color-scheme:dark) { :host { --color-blue: var(--color-blue-50) } }}@layer utilities { .border-color-blue { border-color: var(--color-blue) }}Use side-specific color utilities
border-top-color:transparent changes only the top edge’s paint. Its 6px border still occupies space, keeping content and outer dimensions aligned with the fully painted box.
<!-- Four painted edges --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:6px|solid|var(--color-blue) font-md bg-surface-muted text-body box-border"> Preview panel</div><!-- Transparent top · width preserved --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:6px|solid|var(--color-blue) border-top-color:transparent font-md bg-surface-muted text-body box-border"> Preview panel</div>Transparent color differs from border-top-width:0 or bt-none, which remove the used border width.
Follow the current text color
border-color:currentColor follows the same element’s foreground. Hover or keyboard-focus this button: one foreground change updates both its text and border.
<!-- Current color · foreground and edge --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:2px|solid border-color:currentColor r-sm font-md bg-surface-base text-blue box-border bg-surface-muted:focus-visible text-violet:hover@screen text-violet:focus-visible@screen"> Current color</button>currentColor refers to the computed color of this element. It does not inherit a parent’s border color.
Apply conditionally
At sm, the blue border follows the violet foreground through currentColor. Print makes the border transparent while preserving its width.
<!-- Blue → current color at sm --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:2px|solid border-color-blue r-sm font-md bg-surface-base text-violet box-border bg-surface-muted:focus-visible border-color:transparent@print border-color:currentColor@screen@sm"> Preview details</button>Resize the actual preview viewport. Width and style stay constant across these conditions.
Customization
Customize line colors
Define a semantic line token in each theme, then compile the token declarations with their consuming classes. Switch the preview theme to inspect the resulting separator color.
@theme light { --color-line-divider: color-mix(in oklab, var(--color-slate-60) 40%, transparent);}@theme dark { --color-line-divider: color-mix(in oklab, var(--color-gray-30) 50%, transparent);}<!-- Configured divider · mode-aware paint --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid font-md bg-surface-muted text-body box-border border-color-divider"> Project divider</div>The example retains the authored @theme declarations. The border keeps its own width and style; only the resolved color changes.