CSS Color Keywords
A few predefined color keywords have a special meaning in CSS, and properties like color, background-color, and border-color accept them.
There are three of these keywords:
transparentcurrentcolorinherit
The transparent Keyword
Elements often get a see-through background color from the transparent keyword, which turns any color fully see-through.
Note: Writing transparent gives the same result as rgba(0,0,0,0). What RGBA color values add to RGB color values is an alpha channel, and that channel sets how opaque a color is. Our CSS RGB chapter and our CSS Colors chapter go further.
Example
Here the background image shows through the <div> element, since its background color is fully transparent.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Background</title>
<style>
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
padding: 20px;
}
</style>
</head>
<body>
<div>
<p>This div has a transparent background color.</p>
<p>The background image of the body element shows through.</p>
</div>
</body>
</html>
The currentcolor Keyword
Think of currentcolor as a variable: it holds whatever value the color property of an element has right now.
Reach for it when one specific color should stay consistent throughout a page, or within a single element.
Border with currentcolor
The text color of this <div> element is blue, so its border color turns blue as well.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Border</title>
<style>
div {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>
<div>
The border color of this div is blue, because the text color is blue.
</div>
</body>
</html>
Background with currentcolor
Whatever color the body element currently has also fills the <div> here, as its background.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Background</title>
<style>
body {
color: purple;
}
div {
background-color: currentcolor;
padding: 20px;
height: 50px;
}
</style>
</head>
<body>
<p>The body's text color is purple.</p>
<div></div>
<p>The div above has its background color set to currentcolor, which is purple.</p>
</body>
</html>
Shadow with currentcolor
This <div> takes both its border color and its shadow color from the color currently set on the body element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currentcolor Shadow</title>
<style>
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
padding: 15px;
margin: 30px;
}
</style>
</head>
<body>
<div>
The border and shadow of this div are green, matching the body's text color.
</div>
</body>
</html>
The inherit Keyword
A property set to inherit takes its value from the parent element.
Any CSS property can use this keyword, and so can any HTML element.
Example
Here the parent element passes its border settings down to the <span> element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inherit Border</title>
<style>
div {
border: 2px solid red;
padding: 10px;
}
span {
border: inherit;
}
</style>
</head>
<body>
<div>
The border of the span element <span>is inherited from the parent div</span>.
</div>
</body>
</html>