Make border the same color as text with the currentColor keyword in CSS

2020-03-17

The CSS keyword currentColor can be used as a value for some properties that expect a color for a value. It will cause the color of that CSS property to be the same value as the text color property. This applies to border-color for example:

<div id="currentcolor-example-1" class="example-block">
	<div class="card">Preset border color</div>
	<div class="card with-currentcolor">Border color is currentColor</div>
</div>

#currentcolor-example-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1em;
}

#currentcolor-example-1 .card {
	display: grid;
	justify-content: center;
	align-items: center;
	height: 5em;
	border: .5em solid darkorange;
	border-radius: 1em;
	color: aquamarine;
	text-align: center;
	padding: .5em;
}

#currentcolor-example-1 .card.with-currentcolor {
	border-color: currentColor;
}

@media(prefers-color-scheme: light) {
	#currentcolor-example-1 .card {
		color: blueviolet;
	}
}

.light-mode #currentcolor-example-1 .card {
	color: blueviolet;
}

.dark-mode #currentcolor-example-1 .card {
	color: aquamarine;
}