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

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

<div class="callout">
	Привет!
</div>

<div class="callout callout-danger">
	Осторожно!
</div>

Мы хотим, чтобы у элемента .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.

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