initial, inherit, unset, revert

CSS provides four special keywords that you can use as the value of any property to control where that property's value comes from. They're not values in the usual sense — they're instructions to the cascade: "take the spec default", "take the parent's value", "act as if no rule set you", or "act as if only the browser's stylesheet existed". Knowing which keyword to reach for is a real productivity skill.

initial

initial sets a property to its CSS specification initial value — the value defined in the CSS specification itself, before any stylesheet (including the browser's) has been applied. This is sometimes what you want, but the spec initial values are often not what you'd intuitively expect:

CSS

/* The CSS spec says these are the initial values: */
display: initial;         /* → inline  (not block — even for <div>) */
color: initial;           /* → canvastext (browser-defined — not necessarily black) */
font-size: initial;       /* → medium (browser-defined, typically 16px) */
font-weight: initial;     /* → normal */
margin: initial;          /* → 0 */
border: initial;          /* → medium none currentColor */
position: initial;        /* → static */
visibility: initial;      /* → visible */
flex-direction: initial;  /* → row */

/* Safe uses — properties where initial = 0 or none */
.remove-margin   { margin: initial; }    /* → 0 */
.remove-padding  { padding: initial; }   /* → 0 */
.remove-border   { border: initial; }    /* → medium none — clearer to use 'none' */

display: initial gives you inline, not block — it's the spec default, not the browser default. Use display: block or display: flex explicitly when you need those.

This trips up many developers. `div { display: initial }` makes the div inline, because the CSS specification says the initial value of `display` is `inline`. The browser *default* for div is `block`, but that comes from the browser's own stylesheet, not the spec. `initial` bypasses the browser stylesheet entirely.

inherit

inherit forces a property to take its value from the element's parent — even properties that don't inherit by default. It's particularly useful for form elements and custom components that need to participate in the document's typography:

CSS

/* Buttons and inputs don't inherit font — fix globally */
button,
input,
select,
textarea {
  font: inherit;   /* shorthand: sets font-family, font-size, font-weight, etc. */
  color: inherit;
}

/* Anchors inside .nav should use the nav's color, not the default link blue */
.nav a {
  color: inherit;
  text-decoration: inherit;
}

/* Force a non-inherited property to inherit */
.child {
  border: inherit;        /* takes parent's border */
  background: inherit;    /* takes parent's background */
}

/* Useful pattern: inherit color for SVG icons */
.icon {
  fill: currentColor;     /* currentColor is always the inherited color */
}
svg {
  color: inherit;
}

unset

unset is the most versatile keyword. It acts like inherit for properties that inherit by default, and like initial for properties that don't. In other words, it removes any explicit value and lets the property behave "naturally":

CSS

/* For inherited properties: unset = inherit */
p { color: unset; }         /* color inherits → takes the parent's color */
p { font-size: unset; }     /* font-size inherits → takes the parent's font-size */

/* For non-inherited properties: unset = initial */
p { margin: unset; }        /* margin doesn't inherit → resets to initial (0) */
p { border: unset; }        /* border doesn't inherit → resets to initial */
p { background: unset; }    /* background doesn't inherit → resets to initial (transparent) */

/* The powerful pattern: all: unset */
.clean-button {
  all: unset;   /* removes every property's value — completely blank slate */
  cursor: pointer;       /* re-add what you actually need */
  display: inline-block;
}

/* Great for resetting third-party component styles */
.my-widget {
  all: unset;
  /* now re-style from scratch */
}

revert

revert rolls back the property to the value the browser's user-agent stylesheet would have set — the browser defaults. It's like unset but stops at the browser stylesheet rather than going all the way to the spec initial value:

CSS

/* Undo your stylesheet, keeping browser defaults */
h1 { font-size: revert; }   /* back to browser's default font-size for h1 (~2em) */
p  { margin: revert; }       /* back to browser's default margin for p */

/* all: revert — undo all your styles, keep browser defaults */
.reset-to-browser {
  all: revert;
}

/* Useful when you've over-reset something */
.prose {
  all: revert;   /* let the browser style headings, lists, etc. naturally */
  max-width: 60ch;
  line-height: 1.7;
}

revert-layer

revert-layer is the newest addition. It reverts a property to the value it would have from the previous cascade layer (if you're using @layer). If there is no previous layer, it behaves like revert:

CSS

@layer base {
  .btn {
    background: steelblue;
    color: white;
  }
}

@layer theme {
  .btn {
    background: revert-layer;  /* goes back to steelblue from the base layer */
    color: revert-layer;       /* goes back to white from the base layer */
  }
}

Comparison table

Keyword	Inherited property	Non-inherited property	Use when...
`initial`	Spec initial value (ignores parent)	Spec initial value	You want the spec default regardless of context
`inherit`	Parent's value	Parent's value (forced)	You want explicit inheritance, even for non-inherited props
`unset`	→ parent's value (like inherit)	→ spec initial (like initial)	You want "natural" behaviour — most versatile
`revert`	→ browser default	→ browser default	You want to undo author styles but keep browser defaults
`revert-layer`	→ previous @layer value	→ previous @layer value	You're using @layer and want to step back one layer

When in doubt, use `unset` — it does the right thing for both inherited and non-inherited properties and avoids the `display: inline` surprise of `initial`

`unset` is the safest general-purpose reset keyword because it respects the CSS inheritance model. `all: unset` is the recommended way to wipe a component clean before styling it from scratch. `initial` is best reserved for specific properties where you know the spec initial value and that's what you want (like `margin: initial` to reset to 0).

A modern CSS feature that gives you explicit control over the cascade order: [Cascade Layers (@layer)](/css/cascade-layers).