# Invalid at computed-value time

DevFeed: [Invalid at computed-value time](<https://devfeed.tech/articles/invalid-at-computed-value-time-52312.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2023/invalid-custom-properties>)

Author: Manuel Matuzović

Published: 2023-04-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [browser](<https://devfeed.tech/topics/browser.md>), [properties](<https://devfeed.tech/topics/properties.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [custom-properties](<https://devfeed.tech/tags/custom-properties.md>), [properties](<https://devfeed.tech/tags/properties.md>)

## AI overview

This tutorial explains how invalid values in CSS custom properties are handled at computed-value time. It contrasts direct invalid declarations with values passed through custom properties, which can cause properties such as border and background to fall back to their initial values.

## Source excerpt

I rewatched Lea Verous's talk about custom properties recently and learned something I missed the first time I watched it. A declaration of a custom property can be invalid at computed-value time, if its value is invalid. Depending on the property's type, this results in the property being set to unset, so either the property's inherited value or its initial value, depending on whether the property is inherited or not. That's confusing, I know; here's an example to better understand why it's essential to know that. If we select a button and set its border and background to an invalid value, nothing happens to the button. The browser just throws away the entire declaration. button { border: bla; background: bla; } test If we do the same but now put the invalid value in a custom property instead, the button looks different because the custom property is invalid at computed-value time and falls back to unset, which for background and border means initial since they're not inherited properties. button { --bla: bla; border: var(--bla); background: var(--bla); } test My blog doesn't support comments yet, but you can reply via blog@matuzo.at.