Quick Tip – 13: Quickly Apply Colors Using currentColor

Apr 04 2014

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;
}

1

2

3

4

5

6

7

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

CSS currentColor

The CSS

The Demo

Browser Support

Comments