how to reset a CSS variable (aka custom properties) and use the fallback one?

Question

I am trying to have CSS variables for box model properties. I want to support both setting a value for all sides as well as individual sides. I want to have default values, but be override-able either way. I tries using fallback values, but with little success.

Something like:

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

This will not work as if border-width has a default value then it will always take precedence over the fallback values. Not sure there is a way to do this currently, but I feel so close to finding a solution.

Here is a stackblitz I am playing with: stackblitz

Answer 1

You can unset the value using initial to use the fallback one:

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}

<div>some content</div>
<div class="box">some content</div>