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?