title: How to set CSS variable to the value unset, "--unset-it: unset"?
body: <p>I want to give a CSS variable the value unset, so I can use it for things like <code>outline: unset</code>. (I am aware that the "unset" in <code>--unset-it: unset</code> refers to the variable itself.)</p>
  
  <p>Can it be done? I have made some test here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const theDump = document.getElementById("dump");
  const root = document.documentElement;
  let checked = false;
  
  document.getElementsByName("unset-it").forEach((elt) =&gt; {
    function displayIt(elt) {
      root.style.setProperty("--unset-it", elt.value);
      const propVal = getComputedStyle(root).getPropertyValue("--unset-it");
      theDump.textContent = `--unset-it: ${propVal};`;
    }
    if (!checked) {
      checked = true;
      elt.checked = true;
      elt.focus();
      displayIt(elt);
    }
    elt.addEventListener("click", evt =&gt; {
      const elt = evt.target;
      displayIt(elt);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  #ex {
    background: yellow;
    padding: 0.5rem;
    margin: 1rem 0;
  }
  
  input[type=radio] {
    position: relative;
    width: 15rem;
    margin: 0;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
  }
  
  input[type=radio]::after {
    content: attr(value);
    position: absolute;
    left: 0;
    top: 0;
  }
  
  #div1 {
    outline: var(--unset-it, 2px dotted red);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" name="unset-it" value='"unset"'&gt;
  &lt;input type="radio" name="unset-it" value="'unset'"&gt;
  &lt;input type="radio" name="unset-it" value='unset'&gt;
  &lt;input type="radio" name="unset-it" value='whatever'&gt;
  &lt;input type="radio" name="unset-it" value='"whatever"'&gt;
  &lt;input type="radio" name="unset-it" value='5px solid green'&gt;
  &lt;input type="radio" name="unset-it" value='"5px solid green"'&gt;
  &lt;input type="radio" name="unset-it" value="initial"&gt;
  
  &lt;div id="ex"&gt;
    &lt;p id="div1"&gt;
      outline: var(--unset-it, 2px dotted red);
    &lt;/p&gt;
    &lt;p id="dump"&gt;Dump&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>