unset CSS keyword

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

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

Specifications

Browser compatibility

See also

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