currentColor

The currentColor value refers to the current text color of the element. It can be used on any declaration that accepts a color value.

Example

The border and this link should have the same color as the text.

color: inherit red yellow blue purple

Note: this test changes the paragraph’s color, and not its border-color! Still, the border should follow the text color.

The link has color: currentColor, and this should be read as color: inherit. Thus the link color, too, should change with the paragraph color.

The border-bottom of the link is black, but goes to the currentColor when you hover.

Style sheet:

p#test {
	padding: 5px;
	border-width: 5px;
	border-style: double;
	border-color: currentColor;
}

p#test a {
	color: currentColor;
	border-color: black;
}

p#test a:hover {
	border-color: currentColor;
}

Bug in some WebKit-based browsers: once you’ve hovered once, the current color is used for any subsequent hover, even when you change the paragraph’s color.