Quick Tip 13 Keep Colors Consistent Using Currentcolor

April 04, 2014| 1 Minute Read

layout: post title: “Quick Tip – 13: Quickly Apply Colors Using currentColor” date: “2014-04-04” tags:

“CSS”
“SVG”—

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

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