inherit

The inherit CSS keyword is used to have the property take the same specified value as the property of the element’s parent. Specifying a value of inherit for any CSS property that’s applied to an element will cause the element to get its parent’s computed value for that property.

All CSS properties are allowed to inherit their values from the element’s parent or ancestor, so the inherit value can be used on any CSS property.

Some CSS properties inherit their values from the element’s parent automatically, due to the cascading nature of CSS. For example, if you set a text color of an element, then all the descendants of that element will inherit the same text color. Even though certain property values are inherited automatically, there may be situations in which you want to increase the weight of the inherited property. In such a case, using the value inherit on a property that will already inherit the parent’s value by default will enforce the inheritance of the parent’s value.

One of the situations where you would want to use inherit to enforce a value that’s automatically inherited is when the inherited value is overridden by the user agent’s style sheet (default styles applied by the browser to some elements).

For example, even though the text color value is automatically passed along to all descendants of an element, in the case of anchor elements (links), the color property is commonly set to blue in the user agent style sheet. In most cases, you would either apply a different color to the links, or you may want them to inherit the same color as the rest of the text, and maybe apply another visual effect that indicates that they are links (for example applying an underline or a background color, etc). Assuming that you want the links to have the same text color as the rest of the text, then you can use the inherit value to enforce the value of the color that would normally be inherited.

Some CSS properties do not inherit the computed value of the element’s parent, but you may want to set a property’s value on an element to be the same as the value of its parent. In this case, the inherit keyword is used to do just that: allow properties that don’t automatically inherit a value to inherit it.

For example, suppose you have applied a black border to an element, and you want all of its div children to have the same border, then you could use the inherit keyword on the child div elements’ border-color to let them inherit the same border color as their parent.

It is worth noting here that if you use the shorthand property border to apply the border, then you can not use the inherit value and expect it to work. For example, border: 1px solid inherit; will not inherit the border color from the element’s parent. inherit must be the only value in the declaration, because there’s simply no way of identifying the sub-property to which the value inherit refers—after all, it’s not unique within the sequence. There’s no way of telling that the inherit keyword is supposed to inherit the value of the border-color property, and not the border-style property.
The only way the inherit keyword would work in a shorthand property is if it was the only value given to that property; in this case, the inherit value will be applied to all sub-properties of the shorthand property, and the inheritance will work. Check out the live demo in the next section to see how it works.