Итак, возможно Вы не знаете, но в CSS существует ключевое слово currentColor, которое позволяет использовать значение color для свойств, которые не получают его по умолчанию. Если цвет для элемента не задан, он будет наследоваться из DOM-дерева.

Например, у нас есть два элемента:

 Привет!


 Осторожно!

Мы хотим, чтобы у элемента .callout текст и границы были синего цвета, а у .callout-danger текст и границы были красными.

А вот и CSS-свойства:

.callout {
 border: 1px solid #0074d9;
 color: #0074d9;
 margin-bottom: 1em;
 padding: 1em;
}
.callout-danger {
 border-color: #ff4136;
 color: #ff4136;
}

Но вместо того, чтобы отдельно указывать цвета для границ элементов, можно использовать ключевое слово currentColor:

.callout {
 border: 1px solid currentColor;
 color: #0074d9;
 margin-bottom: 1em;
 padding: 1em;
}

А вот и самое интересное. Теперь для элемента .callout-danger можно не указывать значение свойства border-color, так как оно автоматически унаследует значение от свойства color.

.callout {
 border: 1px solid currentColor;
 color: #0074d9;
 margin-bottom: 1em;
 padding: 1em;
}
.callout-danger {
 color: #ff4136;
}

А вот и пример на codepen:

Область применения currentColor.

Спасибо за внимание.