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.

The CSS

.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.

Found any of this Stuff Helpful?

If you found any this helpful and want to show some love, you can always buy me a coffee!