How CSS all: revert Restores Browser Default Styling

The CSS declaration all: revert provides a straightforward way to strip custom author styles and restore an element to the default styling defined by the browser. This article explains the underlying cascade mechanics of the revert keyword, how it works in tandem with the all shorthand property, how it fundamentally differs from keywords like initial and unset, and how you can implement it to reset specific UI components cleanly.

The CSS Cascade and Origins

To understand revert, you must understand cascade origins. CSS rules are evaluated based on three primary origins, ordered by precedence:

Author Origin: The styles written by website developers in custom stylesheets, <style> tags, or inline style attributes.
User Origin: Custom styles configured by the user via browser settings, extensions, or accessibility overrides.
User-Agent Origin: The native default styles provided by the browser itself (such as making <h1> large and bold, or rendering <button> elements with native system bevels and padding).

When you declare revert on a property within your author stylesheet, it tells the browser to discard all author-level declarations for that property and "roll back" to the next available origin—first checking the user origin, and then falling back to the browser's user-agent stylesheet.

How `all: revert` Operates

The all property acts as a universal shorthand representing almost every CSS property simultaneously, excluding unicode-bidi and direction.

Combining all with revert creates a blanket reset:

.reset-element {
  all: revert;
}

When this rule executes, the browser strips every author-defined style applied to .reset-element. Rather than resetting to an abstract default, the element takes on the styling of the browser's default user-agent stylesheet for that specific HTML tag. For instance, an <ul> element will regain its default bullet markers, left padding, and vertical margins, while a <button> will regain its default system borders, backgrounds, and click interactions.

Differences Between `revert`, `initial`, and `unset`

Developers often confuse revert with initial and unset, but their behavior regarding browser defaults is radically different:

initial: Resets a property to the official CSS specification default. For example, the specification default for display is inline. Setting all: initial on a <div> breaks its layout because it changes the display from block to inline and removes all browser-level formatting.
unset: Acts dynamically. If a property naturally inherits (like color or font-family), unset acts as inherit. If a property does not inherit (like margin or padding), it acts as initial. Like initial, it does not restore browser defaults.
revert: Respects the cascade hierarchy. It specifically looks for the user-agent styles. An <h1> given all: revert retains display: block and its tag-specific font sizing because those are specified in the browser's default stylesheet.

Inheritance Handling

For inherited properties, revert checks whether a parent element passes down a computed value. If an author-level style on a parent container sets font-family: sans-serif;, applying all: revert to a child element will cause inherited properties to continue inheriting from that parent. The property will only revert directly to the user-agent default if no parent style exists or if the property is non-inherited.

Practical Use Case: Resetting Form Controls

A common use case for all: revert is restoring native behavior to form controls inside heavily customized frameworks:

/* Container has heavy global styling overrides */
.form-container input,
.form-container button {
  background: none;
  border: none;
  padding: 0;
}

/* Restore this specific button to the operating system's native look */
.form-container button.native-button {
  all: revert;
  cursor: pointer;
}

Applying all: revert neutralizes utility classes or aggressive CSS resets, allowing native UI components to render exactly as the browser and operating system originally intended.