CSS currentColor Keyword

The CSS currentColor keyword represents the current value of an element's color property and allows the same color to be reused by other CSS properties.

Using currentColor can reduce repeated color values and help related parts of an element automatically stay visually consistent when its text color changes.

How currentColor Works

The currentColor keyword takes its value from the element's color property. If the text color changes, properties using currentColor change with it.

.example {
  color: steelblue;
  border: 2px solid currentColor;
}

In this example, both the text and border are steelblue. The border does not need a separate color value because currentColor uses the value of color.

Using currentColor

The currentColor keyword can be used anywhere a CSS property accepts a color value. This makes it useful for borders, backgrounds, outlines, shadows, and other color-related properties.

.example {
  color: steelblue;
  border-color: currentColor;
  outline-color: currentColor;
  box-shadow: 0 2px 5px currentColor;
}

Changing only the color property can update all of these related colors at the same time.

currentColor & Inheritance

The color property is inherited by default, so descendants can inherit a text color from their parent. When a descendant uses currentColor, it uses its own computed color value, which may be inherited from an ancestor.

.parent {
  color: darkmagenta;
}
.child {
  border: 2px solid currentColor;
}

If the child does not have a different color value, its border uses the inherited darkmagenta color.

currentColor with SVG

The currentColor keyword is also useful with SVG graphics. An SVG can use the surrounding text color for its fill or stroke, allowing icons and text to remain visually coordinated.

.icon {
  color: steelblue;
}
.icon svg {
  fill: currentColor;
}

If the element's color changes, the SVG fill changes with it without requiring another color declaration.

Benefits of currentColor

Using currentColor can simplify stylesheets by reducing repeated color values. It is particularly useful for components where text, borders, icons, or decorative details should share the same color.

.button {
  color: steelblue;
  border: 2px solid currentColor;
}
.button:hover {
  color: midnightblue;
}

When the button's text color changes on hover, the border automatically changes to match because it uses currentColor.

currentColor Example

This example uses one color declaration for the text, border, and decorative line. Change the color value in the editor and all three will update together.

<style>
.current-color-example {
  color: steelblue;
  border: 3px solid currentColor;
}
.current-color-example hr {
  border: 0;
  border-top: 3px solid currentColor;
}
</style>

<div class="current-color-example">
  <h2>currentColor Example</h2>
  <p>The text and border use the same color.</p>
  <hr>
</div>

Play in Editor

Only the color property needs to change. The border and decorative line automatically use the new color through currentColor.