MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS colors

currentColor returns the computed color value of the current element.

Use in same element

Here currentColor evaluates to red since the color property is set to red:

div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px currentColor;
}


Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, beatae? Quo esse, illo fuga aspernatur officia ullam quis enim ducimus dignissimos omnis eveniet nobis suscipit soluta saepe totam alias maxime cupiditate distinctio. Esse, officia!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit natus dolorum impedit voluptatem saepe, corporis odio harum repellendus! Maiores incidunt illum quaerat, sint praesentium libero laboriosam consequuntur earum quos voluptatum quidem, tenetur fugit, nulla dolorem nostrum distinctio perferendis suscipit repellendus quis laborum! Alias, qui rem!


In this case, specifying currentColor for the border is most likely redundant because omitting it should produce identical results. Only use currentColor inside the border property within the same element if it would be overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second rule overriding the first:


div {
color: blue;
border: 3px solid currentColor;
color: green;
}


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat tenetur ut odit, nostrum quia fugit illo omnis dolor aperiam sequi ratione maxime reiciendis dolore voluptatum, laborum ab. Facilis quam vero similique soluta deleniti obcaecati.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis itaque asperiores dicta ab perspiciatis, explicabo ratione natus aliquid omnis molestias sapiente magni, recusandae odio ullam voluptatem deleniti corrupti corporis et. Labore, ad. Unde expedita perferendis quis totam facilis quia, omnis hic ullam quos, accusantium nostrum?






Conclusion

In this page (written and validated by ) you learned about CSS Colors . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Color Keywords.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.