框模型的CSS自定义属性（变量）

我正在尝试为框模型属性设置CSS变量。我要支持为所有方面以及各个方面设置值。我想拥有默认值，但是无论哪种方式都可以覆盖。我尝试使用后备值，但收效甚微。

就像是：

: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;
}