Quick Tip – 13: Quickly Apply Colors Using currentColor

April 04, 2014 | 1 Minute Read

If you've ever wanted to do something like set the borders on a container to the same color as the text within it you can easily do it using currentColor.

currentColor can be used for anything that accepts a color value like box-shadow, background-color, etc.


.parent {
    color: red;

.child {
    border: solid 3px currentColor;

The Demo

My border should have a color of red which matches the color of my text

Browser Support

ie9 and above Chrome 1 and above Fire Fox 3.5 and above Safari 4 and above

CSS currentColor has pretty good browser support working in all modern browsers. Not supported in ie8 and below.