The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

Examples

Color

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
<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>

Result:

Border

div {
	border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
	border-color: unset;
}

<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 has a black border (initial default, not inherited)</p>
</div>

Result:

Specifications

Specification Status Comment
CSS Cascading and Inheritance Level 4
The definition of 'unset' in that specification.
Working Draft No changes from Level 3
CSS Cascading and Inheritance Level 3
The definition of 'unset' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 41 27 (27) Edge build 10565+ No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 27.0 (27) No support No support No support

See also

The CSS-wide property values: initial, inherit, unset, and revert.

Document Tags and Contributors

 Contributors to this page: Krinkle, RedLucas, cvrebert, f0086, Sebastianz, myakura, teoli
 Last updated by: Krinkle,