How to use the currentColor value in CSS

DanielSeptember 8, 2021December 28, 2022

In CSS we have a special color value named currentColor that maybe be unknown to most people.

What currentColor does is to take the value for the color property and use it for any other property there has a color parameter.

For example the following:

.red-box {
    color: red;
    border: 2px solid red;
    box-shadow: 5px 10px red;
}

Is the same as having:

.red-box {
    color: red;
    border: 2px solid currentColor;
    box-shadow: 5px 10px currentColor;
}

It provides us with increased flexibility for our CSS. We just have to change the color in one place. Think of it as a CSS variable for colors only.

And it works even with inherited values too. For example:

body {
    color: blue;
}
p {
    border: 1px solid currentColor;
    /* will create paragraphs with a blue border */
}

Hoever, keep in mind that the rules of cascading apply also here. If we have an inherited value and we set a new color for the child, that new value will have priority.

And it works even with inherited values too. For example:

body {
    color: blue;
}
p {
    border: 1px solid currentColor;
    color: red;
    /*  will create paragraphs with a RED border */
}