What's the difference between { color: inherit } vs { color: currentColor }?

Question

Please see this minimum example

.inherit {
  color: red;
}
.inherit p {
  color: inherit;
}

.currentColor {
  color: red;
}
.currentColor p {
  color: currentColor;
}

<div class="inherit">
  <p>inherit</p>
</div>

<div class="currentColor">
  <p>currentColor</p>
</div>

These two are resulting in the same.

Is there any difference when using currentColor in the color property when I can just use inherit?

Answer 1

inherit means that the value used by the parent is used.

currentColor follows closest color property value,

Example 1

this divs border-color and box-shadow color will be red. Because currentColor follows closest color property value.

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

Example 2

this divs border-color and box-shadow color will be blue. Because the closest color property value is defined in the body and its blue.

body {
  color: blue;
}

body > div { 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}