CSS all unset: What It Is and Reset Use Cases

The CSS all: unset declaration provides a comprehensive way to reset an HTML element by clearing nearly all of its applied styles at once. This article explains how the all shorthand and the unset keyword work together to change CSS property values based on natural inheritance, how this behavior differs from other global keywords, and the practical use cases where developers can leverage it to strip away browser defaults, streamline component resets, and build clean UI elements from scratch.

What is `all: unset`?

The all property is a CSS shorthand that targets every standard CSS property on an element, with the exceptions of direction and unicode-bidi.

When paired with the unset keyword, the browser resets each property according to whether it is naturally inherited:

Inherited properties (such as color, font-family, and line-height) behave as inherit. They take their values from the parent element.
Non-inherited properties (such as background, border, padding, margin, and display) behave as initial. They revert to their default specifications defined by the CSS specifications.

By applying all: unset, you effectively wipe out the browser's default user-agent stylesheet and any previously declared styles on that element, while still allowing text styling to flow down naturally from parent containers.

.clean-element {
  all: unset;
}

How `unset` Compares to `initial` and `revert`

To use all: unset effectively, it helps to distinguish it from similar global keywords:

all: initial: Forces every property to its CSS specification default. Even inherited properties like color switch to initial defaults (e.g., black text), breaking parent inheritance.
all: revert: Rolls styles back to the browser's default user-agent stylesheet, discarding only author styles.
all: unset: Strips user-agent styles for non-inherited properties, but preserves the natural flow of typography and text inheritance from parent elements.

Common Reset Use Cases

1. Stripping Default Button Styles

Browsers apply heavy default styling to native <button> elements, including borders, bevels, padding, and gray backgrounds. Traditional resets require writing multiple lines of CSS to normalize them.

Using all: unset creates a blank canvas while retaining text styling:

.btn-custom {
  all: unset;
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #0070f3;
  color: #ffffff;
  border-radius: 4px;
}

Unordered (<ul>) and ordered (<ol>) lists contain default margins, padding, and list-style markers. When using semantic lists for navigation menus, all: unset quickly clears these defaults without requiring individual rules for list-style, padding-inline-start, or margins:

.nav-list {
  all: unset;
  display: flex;
  gap: 1rem;
}

.nav-list li {
  all: unset;
}

3. Styling the Native `<dialog>` Element

The HTML <dialog> element comes with default borders, padding, full-screen constraints, and background colors defined by the user-agent. When implementing custom modal systems or popovers, all: unset flattens the dialog so you can design it without fighting built-in geometry:

dialog.custom-modal {
  all: unset;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

4. Isolating Web Components and Widgets

When embedding isolated components, third-party widgets, or custom elements into unknown environments, inherited styles or global stylesheets can break the layout. Applying all: unset at the root of your component clears external style leaks on non-inherited properties, giving you predictable control over the internal design.

5. Normalizing Form Fields

Native inputs, textareas, and fieldsets often feature operating-system-specific chrome, shadows, and borders. Using all: unset on an input allows you to reconstruct a cross-browser design consistently from the ground up:

.input-reset {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 2px solid #ccc;
  padding: 0.5rem 0;
}

.input-reset:focus {
  border-color: #0070f3;
}

Critical Considerations When Using `all: unset`

While convenient, all: unset introduces a few side effects that must be handled manually:

The display Property Reverts to inline: Because display is a non-inherited property, its initial specification value is inline. Applying all: unset to naturally block-level elements like <div>, <section>, or <button> will turn them into inline elements. You must explicitly declare display: block, display: flex, or your desired layout mode.
Accessibility and Focus States: all: unset strips away default :focus and :focus-visible outlines. If you use it on interactive elements like buttons, links, or inputs, you must implement custom, accessible focus indicators to ensure keyboard navigability remains intact.

CSS all unset: What It Is and Reset Use Cases

What is all: unset?

How unset Compares to initial and revert