CSS Inheritance: How the inherit Keyword Works

The CSS-wide keyword inherit sets a property on an element to the computed value of that same property on its parent element. It works for any property, including properties that do not inherit by default. For example, color: inherit copies the parent’s computed text color, while border: inherit explicitly copies its border value.

Inheritance follows the document tree: the parent means the element’s parent in the DOM, not whichever element happens to contain it visually. On the root element, which has no parent, inherit resolves to that property’s initial value. [MDN: inherit]

1. What does inherit mean in CSS?

Use inherit as a value for one CSS property when you want that property to take its parent’s computed value:

.parent {
  color: rebeccapurple;
}

.child {
  color: inherit;
}

The child’s computed color becomes the parent’s computed color. Since color normally inherits by default, this declaration often produces the same result as leaving color unspecified. The keyword is more visibly useful when you want to override another declaration or explicitly inherit a property that normally does not inherit.

inherit applies to the named property only. It does not copy every style on the parent. To inherit several properties, name them individually or use all: inherit with care.

2. How to make a property inherit from its parent

1. Identify the specific property you want to inherit, such as border, font-size, or color.
2. Apply a declaration to the child that sets that property to inherit.
3. Check the parent’s computed value in the browser’s developer tools if the result is unexpected. A parent may itself inherit or receive its value from the cascade.

Here is a complete HTML file you can save as inherit-example.html and open in a browser:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS inherit example</title>
  <style>
    .card {
      color: rebeccapurple;
      border: 2px solid;
      padding: 1rem;
    }

    .card__link {
      color: inherit;
    }

    .card__child {
      border: inherit;
      margin-top: 1rem;
      padding: 0.75rem;
    }
  </style>
</head>
<body>
  <section class="card">
    <p>This parent has purple text and a solid border.</p>
    <a class="card__link" href="#example">This link inherits the text color.</a>
    <div class="card__child" id="example">
      This child explicitly inherits the parent border.
    </div>
  </section>
</body>
</html>

In the example, the link’s color is an inherited property already, so its declaration makes the intent explicit. The child’s border is the clearer demonstration: borders are not inherited by default, but border: inherit asks the child to use the parent’s computed border.

3. Which CSS properties inherit by default?

Inheritance depends on the property. Some properties inherit when you do not specify a value; others use their initial value. For example, color and font-family normally inherit, while border and margin normally do not. Explicitly writing inherit requests the parent value in either case. [MDN: Inheritance]

Do not guess based on how a property looks. Check the property’s reference documentation for its inherited status, or inspect the computed styles in browser developer tools. Inherited status describes the default behavior when a property is not set; it does not restrict whether you can use inherit.

4. inherit vs. initial, unset, revert, and revert-layer

Keyword	Meaning	Use it when
inherit	Use the parent’s computed value for this property.	You specifically want the parent’s value, even for a normally non-inherited property.
initial	Use the property’s initial value.	You want the property’s defined initial value, regardless of the parent. [MDN: initial]
unset	Act like inherit for normally inherited properties and like initial for normally non-inherited properties.	You want to restore the property’s ordinary defaulting behavior.
revert	Roll back the value to one from an earlier cascade origin.	You want to undo declarations at the current origin and defer to the cascade’s earlier origin rules.
revert-layer	Roll back the value to one from an earlier cascade layer.	You want to undo a value from the current layer and use the cascade from an earlier layer.

The quick distinction is that inherit always asks for the parent’s computed value. unset chooses between the parent value and the initial value based on whether the property normally inherits. The other two keywords roll back through the cascade rather than directly requesting the parent value. These are CSS-wide keywords; their effects are still subject to the CSS cascade. [MDN: inherit] [W3C: CSS Cascading and Inheritance Level 4]

5. Use all: inherit carefully

The all shorthand applies a CSS-wide keyword to nearly all properties on an element. For example:

.child {
  all: inherit;
}

This is much broader than inheriting a single property. It can also copy values such as display, which may change layout—for example, making an element behave like its parent’s block-level display value. It does not apply to every CSS property: direction, unicode-bidi, and custom properties are excluded from all. When you only need a particular effect, prefer a targeted declaration such as color: inherit or border: inherit. [MDN: all]

6. Shorthands: inherit one component with its longhand

A shorthand such as border can set several longhand properties at once. Components omitted from a shorthand are assigned default values defined for that shorthand; they do not automatically inherit the corresponding parent values. To inherit only one component, set its longhand explicitly:

.parent {
  border: 4px solid tomato;
}

.child {
  border-width: inherit;
  border-style: dashed;
  border-color: navy;
}

Here, only the width is explicitly inherited. The child’s style and color come from its own declarations. Shorthand rules can vary by shorthand, so consult the relevant property reference when a shorthand’s omitted components matter. [MDN: Shorthand properties]

7. Common mistakes and troubleshooting

The child does not match the value I expected

Cause: inherit uses the parent’s computed value for that same property. The parent may have a different value than you expect, or may itself inherit from a higher ancestor.

Fix: Inspect the parent’s computed style, then follow the DOM parent chain. Remember that visual containment and DOM parentage can differ, especially when portals or restructured markup are involved.

Adding inherit did not appear to change anything

Cause: The property may already inherit by default, or the parent’s computed value may match the child’s existing value.

Fix: Compare the child’s computed style before and after the declaration, or test with a normally non-inherited property such as border.

A border or spacing value does not inherit automatically

Cause: That property normally does not inherit.

Fix: Set the child’s property to inherit explicitly, for example border: inherit. Be deliberate with spacing: inheriting a parent’s margin or padding can create unexpected layout.

all: inherit breaks the layout

Cause: It applies inheritance broadly, including to properties that control layout and display.

Fix: Replace it with declarations for only the properties the child needs. If the broad reset is intentional, inspect computed styles for changes to display and other layout properties.

One part of a shorthand did not inherit

Cause: Omitting a component from a shorthand does not request inheritance; the shorthand assigns its default value for omitted components.

Fix: Use the specific longhand with inherit, such as border-width: inherit.

The value on the root element is surprising

Cause: The root element has no parent, so there is no parent computed value to take.

Fix: Set the desired value directly or use the property’s initial value when that is the intended result.

8. Practical guidance for maintainable CSS

• Use inherit when the relationship to the parent is intentional and should remain tied to the parent’s computed value.
• Prefer ordinary inheritance for properties that already inherit by default, unless an explicit declaration improves clarity or overrides another rule.
• Use targeted properties instead of all: inherit for component styling.
• For custom properties, remember they normally inherit unless registered with different inheritance behavior; the inherit keyword itself remains a CSS-wide keyword.
• When cascade layers, origins, or specificity are involved, inspect the winning declaration as well as the computed result. A declaration using inherit still participates in the cascade.

9. Or skip the browser setup

To render a page for visual review, you can launch and configure a browser yourself, or use ScreenshotNeo, a website screenshot API and MCP server. Its single GET request returns an image or PDF, and its [API documentation](https://screenshotneo.com/docs/) lists the available capture options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Before a capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. [See ScreenshotNeo’s API docs](https://screenshotneo.com/docs/).

Create a free ScreenshotNeo account for 1,000 screenshots a month, with no card required.

10. FAQ

Does inherit copy every style from the parent?

No. It applies to the property where you use it. Use all: inherit only when broad inheritance is intended.

Does inherit work on custom properties?

Yes. It is a CSS-wide keyword and can be used with custom properties. Custom properties normally inherit, though registered custom properties can define different inheritance behavior.

Can I use inherit to copy a value from a grandparent?

Not directly. It requests the immediate parent’s computed value. If that parent inherits the property, its computed value may already reflect an ancestor’s value.

Is inherit the same as initial?

No. inherit requests the parent’s computed value. initial requests the property’s initial value.

References

• MDN: inherit
• MDN: Inheritance
• MDN: initial
• MDN: all
• MDN: Shorthand properties
• W3C: CSS Cascading and Inheritance Level 4