CSS inherit, initial, unset & revert Explained

CSS ships four global keywords — inherit, initial, unset, and revert — that can be assigned to any property to control where its value comes from, instead of setting an actual color, size, or string. They look interchangeable at a glance, but each resolves a property’s value through a completely different path, and picking the wrong one is a common source of “why won’t this style just go away” bugs.

The problem they solve

Every CSS property resolves through a cascade: does it have an explicitly set value, does it inherit from a parent, or does it fall back to a built-in default? Most of the time you don’t think about this — you set color: navy and move on. But sometimes you need to explicitly reset a property rather than set it to a concrete value, typically when undoing a style from a component library, a browser default, or a more specific selector elsewhere in the cascade. That’s what these four keywords are for.

inherit: take the parent’s value

inherit forces a property to use its parent element’s computed value, regardless of whether that property normally inherits on its own.

Some properties — color, font-family, line-height — inherit by default already. Others, like border or margin, don’t, because it would rarely make sense for every child to automatically pick up its parent’s border. inherit lets you opt a non-inheriting property into that behavior for one specific element:

.card__border {
  border: inherit;
}

initial: reset to the CSS specification default

initial resets a property to the default value defined in the CSS specification for that property — not the browser’s stylesheet default, the spec’s default. For display, that’s inline. For color, it’s typically canvastext (rendering as black in most contexts). This is a “start from the CSS spec’s blank slate” reset, and it ignores both inheritance and the browser’s built-in stylesheet entirely.

unset: inherit if it would anyway, otherwise reset

unset is the pragmatic middle ground. It checks whether the property inherits by default:

• If it does (like color), unset behaves like inherit.
• If it doesn’t (like border), unset behaves like initial.

This makes unset a good “clear whatever is set here” default when you don’t want to think about which properties naturally inherit and which don’t.

revert: roll back to the browser’s built-in stylesheet

revert is the odd one out, and the one people reach for without realizing what it actually does. Instead of the CSS specification’s default, revert rolls a property back to the value it would have from the user-agent stylesheet — the browser’s built-in defaults — as if none of your site’s CSS existed for that property, while still respecting inheritance rules.

This is the one that actually undoes browser defaults meaningfully. Reset list-style on a <ul> to initial and you get outside behavior per spec; revert gets you back to what the browser would render for a plain, unstyled list. It’s especially useful for surgically un-doing a CSS reset or normalize stylesheet on a single element, without hand-writing what the browser default actually was.

Comparison

	inherit	initial	unset	revert
Source of value	Parent’s computed value	CSS spec default	Parent’s value (if inheritable) or spec default	Browser’s user-agent stylesheet
Respects inheritance	Always	Never	Only for naturally inheriting properties	Yes
Undoes author styles	No (uses parent’s author style)	Yes	Yes	Yes
Undoes browser defaults	No	Yes	For non-inheriting properties	No — restores them
Typical use	Opt a property into inheriting	Hard reset to spec baseline	General-purpose “clear this”	Undo a reset/normalize on one element

Where this shows up in practice

Component libraries and design systems. If you’re shipping a component that needs to be embeddable inside arbitrary host pages, all: unset on the component’s root is a common way to strip out whatever inherited styles the host page might impose, before applying your own custom properties and rules on top.

Undoing a CSS reset selectively. Global resets (* { margin: 0; box-sizing: border-box; } and similar) are useful almost everywhere, but occasionally you want one element — a <blockquote> pulled from user content, say — to look the way the browser would render it by default. revert on that element is more precise than re-declaring every property the reset touched.

Dark mode and theme overrides. When toggling a theme with something like light-dark() or a custom property swap, unset can clear a property that a more specific selector set for one theme, letting the general rule apply again for the other.

Debugging the cascade. When you’re not sure why a property has the value it does, temporarily setting it to unset or revert in devtools is a fast way to see what’s underneath — closer to “remove this declaration” than any other keyword gives you without actually deleting code.

The keyword that isn’t really a fifth option: revert-layer

If your stylesheet uses cascade layers, there’s a fifth, more specialized keyword: revert-layer, which rolls a property back to the value it had in a previous layer rather than all the way to the user-agent stylesheet. It solves a narrower problem — undoing an override within your own layered architecture — and is worth knowing exists once a project is complex enough to use layers deliberately, but for most day-to-day CSS the four keywords above cover it.

A common mistake

The most frequent error is reaching for initial when revert is what’s actually wanted. initial throws away the browser’s sensible default too — reset display: initial on something the browser renders as list-item or table-cell, and you’ll get inline instead, which is rarely the intent. If the goal is “make this look like the browser never touched it,” revert is almost always the correct keyword; initial is for the rarer case where you want the CSS specification’s baseline instead. Understanding this distinction matters as much for hand-written CSS as it does for reasoning about how any box model property resolves once several stylesheets are in play.

The takeaway

inherit, initial, unset, and revert all reset a property, but to different targets: inherit copies the parent, initial goes to the CSS spec’s default, unset picks whichever of those two makes sense for that property, and revert restores the browser’s own built-in style. Most everyday resets want unset or revert — initial is the one to reach for least often, since it discards sensible browser defaults along with everything else.