inherit
The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all.
For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
Note: Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
global_keywords | 1 | 12 | 1 | 1 | 18 | 1 |
| The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all. | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.child {
border: inherit;
color: inherit;
font-size: inherit;
}Live demo
Use cases
-
Using inherit
The inherit CSS keyword causes the element to take the computed value of the property from its parent element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.