Example
currentColor returns the computed color value of the current element.
Use in same element
Here currentColor evaluates to red since the color property is set to red:
div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px currentColor;
}
In this case, specifying currentColor for the border is most likely redundant because omitting it should produce identical results. Only use currentColor inside the border property within the same element if it would be overwritten otherwise due to a more specific selector.
Since it's the computed color, the border will be green in the following example due to the second rule overriding the first:
div {
color: blue;
border: 3px solid currentColor;
color: green;
}
Inherited from parent element
The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's border-color blue.
.parent-class {
color: blue;
}
.parent-class .child-class {
border-color: currentColor;
}
currentColor can also be used by other rules which normally would not inherit from the color property, such as background-color. The example below shows the children using the color set in the parent as its background:
.parent-class {
color: blue;
}
.parent-class .child-class {
background-color: currentColor;
}
Possible Result:
