unset

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the {{cssxref("inherit")}} keyword in the first case, when the property is an inherited property, and like the {{cssxref("initial")}} keyword in the second case, when the property is a non-inherited property.

unset can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}.

Examples

Color

color is an inherited property.

HTML

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>

CSS

.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}

Result

{{ EmbedLiveSample('Color') }}

Border

border is a non-inherited property.

HTML

<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has a black border (initial default, not inherited).</p>
</div>

CSS

div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

Result

{{ EmbedLiveSample('Border', 'auto', 200) }}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Use the {{cssxref("initial")}} keyword to set a property to its initial value.
• Use the {{cssxref("inherit")}} keyword to make an element's property the same as its parent.
• Use the {{cssxref("revert")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
• Use the {{cssxref("revert-layer")}} keyword to reset a property to the value established in a previous cascade layer.
• The {{cssxref("all")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.