When using the unset keyword, it will attempt to revert to inherited property values before resorting to browser or custom stylesheet values. According to MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. Essentially, it functions like the inherit keyword when inheriting and like the initial keyword when not.

Learn more about unset - CSS @ MDN

revert and unset may seem identical, but they differ when the default CSS value for a property conflicts with the value set by the browser or custom stylesheets created by the user.

For instance, the default CSS value for display is inline for all elements, including divs. Therefore, if you set display:unset, it will behave as if it were set to display:inline. However, most browsers actually set display:block for div elements.

<div style="border: 1px solid blue">
  <p> This div uses unset, so now the divs' display will be inline</p>
  <div style="display:unset;"> text</div>
  <div style="display:unset;"> text</div>
</div>
<br/>
<div style="border: 1px solid blue">
  <p> This div uses revert, meaning the divs' display will be block (either the browser default or the user-defined value)</p>
  <div style="display:revert;"> text</div>
  <div style="display:revert;"> text</div>
</div>

The explanations provided above do not delve deep enough into the intricacies of these unique "reset" property values. Many developers struggle with understanding the difference between inheritable and non-inheritable properties when utilizing them.

It's important to note that all, revert, and unset will not function properly on Internet Explorer. Therefore, it is recommended to combine them with other solutions for compatibility.

Let's analyze the behavior of all:revert first, which essentially sets all properties to unset, except for one key distinction explained below. When applying all:revert to an element(s), the following actions take place:

1. Any inheritable properties (typically text-related such as font or color) previously assigned via style sheets are removed and set to "inherit". Styles from either the body element or the browser's default User Agent style sheet now cascade down through normal inheritance to the element. Any directly assigned or customized styles are replaced with inherited values using the "inherit" keyword.
2. Any non-inheritable property values (like display or border) assigned via style sheets are eliminated from the element, and the browser's default style sheet values take precedence. This usually refers to the default style sheet bundled with the browser upon installation.
3. The aforementioned rules assume that there are no more specific cascading styles overriding the "revert" action for any property on the targeted element. Remember, "all:revert" behaves like any other CSS property, so any cascading styles would individually override the properties affected by "all:revert" on that element.

For example:

INHERITABLE PROPERTY If a special property like "font-family:sans-serif" (which is inheritable) was initially applied to a "div", but then switched to "all:revert", the "sans-serif" styling would be removed from the font family, allowing it to inherit the font-family value dictated by its parent in the hierarchy. This could trace back several levels up or originate from the "body" element.

NON-INHERITABLE PROPERTY Similarly, if a custom value such as "border:2px solid blue;" (non-inheritable) was set on the same "div" but later replaced with "all:revert", the border styling would be stripped, reverting to the default "border" value specified for "div" in the browser's User Agent style sheet. Typically, this default value is "none" for borders on "div".

On the other hand, all:unset operates similarly but reverts non-inheritable properties back to the "initial" state rather than the default style defined in the browser's UA stylesheet or the element's default value for that property. This can lead to unexpected outcomes. For instance, setting "display:unset" on a "div" would default to "display:inline", contrary to the anticipated "display:block".

There are specific values that can be assigned to each property. Stokely's response underscores the importance of distinguishing between inherited and non-inherited properties.

initial
This value is used to set a property to its initial specified value, like color: initial;. It's important to note that this initial value may not always correspond to the default style sheet value set by the browser.

inherit
When this value is used, a property inherits the computed value of its parent, as in *{box-sizing: inherit;}.

unset
This keyword functions similarly to the value inherit for inherited properties and the value initial for non-inherited properties.

revert
The value is solely determined by the cascade of user and user agent rules, disregarding conflicting author rules when setting the value. However, these rules remain valid based on their specificity.

all
The shorthand property "all" can adopt any of the aforementioned global values. According to MDN Web Docs, this value will apply to all properties except unicode-bidi and direction.

The excerpt:

The revert CSS keyword resets the cascaded value of a property back to what it would have been if no changes had been made by the current style origin to the current element. It essentially reverts the property either to its inherited value from its parent or to the default value set by the user agent stylesheet (or by existing user styles).

is somewhat misleading. For many inherited properties, using the declaration property: revert; effectively behaves the same as property: inherit;, meaning the calculated value of the parent element is adopted. Exceptions include form elements like input, select, textarea, and button, where the user agent interrupts the inheritance chain, specifying explicit values for font-family and font-size. In such cases, the value revert causes these elements to adopt the user agent's values. Non-inherited properties always take the value derived from the cascade of user and user agent rules. An example illustrates this concept.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Testing Global Values and Shorthand Property all</title>
  <style>
    body, div{border: solid 2px;padding:10px;margin: 10px;}
    .all-revert { all:revert;}
    div{ font-family: 'Courier New', Courier, monospace; }
  </style>
</head>

<body style="font-family:serif;color:royalblue;font-size: 24px;">
  <div class="all-revert">Default serif (TNR), no margin, no border.</div>
  <div>Courier New, margin of 20 pixels, and border.</div>
  <button class="all-revert">Arial</button>
  <button style="all:unset; border:revert;">Default serif</button>
</body>

</html>

The rule div, button {all: revert;} affects the div and button elements differently. The div element has all font-related properties set to inherit, applying the settings from the body element. Conversely, the button element inherits default font color, size, and type values chosen by the user agent.

The use of the value unset on inherited properties mirrors the effect of inherit; hence, the font properties of the second button inherit from the body element, while the border adopts the user agent's settings. For non-inherited properties like border, padding, and margin, the 'revert' value leads to adoption of user agent values.