Transparent CSS borders with the inherited color

You can inherit CSS colors from parent elements using the 

inherit

currentColor

.someClass {
	color: inherit
}

This works for border color too:

.someClass {
	border-color: inherit
}
/* or using the shorthand: */
.someClass {
	border: 1px solid currentColor
}

But suppose you’d want to have a semi-transparent color. When setting colors normally you would simply use 

rgba()

.someClass {
	border: 1px solid rgba(255,255,255,0.5);
}

But this does not work for inherit or currentColor since rgba does not accept these keywords. But with a little trickery we can use the 

:before

.someClass {
	color: inherit;
	position: relative;
	border: none;
}
.someClass:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border: 1px solid currentColor;
	opacity: 0.5;
}

Cool :-)