🎁 Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

How to use the currentColor value in CSS

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 */
}

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *