title: How do I set a value of `inherit` to a CSS custom property?
body: <p>Setting a custom property to a value of <code>inherit</code> does exactly what you’d expect for every other CSS property: it inherits the same property value of its parent.</p>
  
  <h1>normal property inheritance:</h1>
  
  <pre><code>&lt;style&gt;
    figure {
      border: 1px solid red;
    }
    figure &gt; figcaption {
      border: inherit;
    }
  &lt;/style&gt;
  &lt;figure&gt;this figure has a red border
    &lt;figcaption&gt;this figcaption has the same border
      as its parent because it is inherited&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <h1>custom property inheritance (explicit):</h1>
  
  <pre><code>&lt;style&gt;
    figure {
      --foobar: 1px solid green;
    }
    figure &gt; figcaption {
      --foobar: inherit;
      border: var(--foobar);
    }
  &lt;/style&gt;
  &lt;figure&gt;this figure has no border
    &lt;figcaption&gt;this figcaption has a green border
      because it explicitly inherits --foobar&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <h1>custom property inheritance (implicit):</h1>
  
  <p>all custom properties (unlike <code>border</code>) are inherited by default</p>
  
  <pre><code>&lt;style&gt;
    figure {
      --foobar: 1px solid green;
    }
    figure &gt; figcaption {
      border: var(--foobar);
    }
  &lt;/style&gt;
  &lt;figure&gt;this figure has no border
    &lt;figcaption&gt;this figcaption has a green border
      because it implicitly inherits --foobar&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <h1>my question</h1>
  
  <p>How do you set a <em>literal</em> value of <code>inherit</code> to a custom property, when you want its value to actually calculate to the keyword <code>inherit</code>?</p>
  
  <pre><code>&lt;style&gt;
    figure {
      border: 1px solid red;
      --foobar: 1px solid green;
    }
    figure &gt; figcaption {
      border: var(--foobar);
    }
    figure &gt; figcaption:hover {
      --foobar: inherit;
    }
  &lt;/style&gt;
  &lt;figure&gt;this figure has a red border
    &lt;figcaption&gt;this figcaption has a green border
      because it inherits --foobar&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;!-- on hover --&gt;
  &lt;figure&gt;this figure has a red border
    &lt;figcaption&gt;I want this figcaption
      to have a red border (inherited from figure)
      but its border is green!&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>In this example, I want the second <code>figcaption</code> (on hover) to inherit its parent’s red border, so I set <code>--foobar</code> to <code>inherit</code>. However as shown in example 2, this does not calculate to <code>inherit</code>, it calculates to the value that is inherited from the parent’s property <code>--foobar</code> (if it has one), which in this case is green.</p>
  
  <p>I completely understand why the CSS authors designed it this way: <code>--foobar</code> is just like any other CSS property, so setting <code>inherit</code> should inherit its value. So I guess I’m asking if there is a workaround for getting the second <code>figcaption</code> to inherit its parent’s border.</p>
  
  <p>Note, I considered doing</p>
  
  <pre><code>figure &gt; figcaption:hover {
    border: inherit;
  }
  </code></pre>
  
  <p>but this defeats the purpose of using a CSS variable.</p>
  
  <p>In the case that there are many other properties in <code>figure &gt; figcaption</code> that all use the value <code>var(--foobar)</code>, I don’t want to redefine them all over again for the hover scenario. I'd rather set these properties only once, and then reassign the variable based on context.</p>