Widely available A practical token-like value for keeping related visual pieces synchronized with foreground color.

currentColor

currentColor reuses the current value of the color property in other CSS properties. It helps align borders, icons, shadows, and decorative details with the current text color.

ColorTokensInheritance

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.currentcolor
1
12
1.5
4
18
3.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.icon-button {
  color: #3b82f6;
  border: 2px solid currentColor;
  fill: currentColor;
}

Live demo

border to inheritance

CSS border to inheritance demo.

PreviewFullscreen

SVG Fill to inheritance

CSS SVG fill to inheritance demo.

PreviewFullscreen

Box-shadow to inheritance

CSS Box-shadow to inheritance demo.

PreviewFullscreen

Use cases

  • Color-synced decorations

    Match borders, SVG strokes, or outlines to the current text color without duplicate declarations.

  • Theme-aware components

    Let reusable components inherit and reuse the surrounding foreground color automatically.

Cautions

  • Implicit color coupling can become surprising if a parent text color changes unexpectedly.
  • Use it intentionally so the relationship between text and decoration remains meaningful.

Accessibility

  • Shared color tokens can improve consistency, but contrast should still be checked for every property that inherits currentColor.

Related links