# How Invalid Custom Properties Affect CSS Shorthand Properties

DevFeed: [How Invalid Custom Properties Affect CSS Shorthand Properties](<https://devfeed.tech/articles/maybe-don-t-use-custom-properties-in-shorthand-properties-52339.md>)

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

Author: Manuel Matuzović

Published: 2025-03-06T00:00:00Z

Content type: article

Language: en

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

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

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

## AI overview

The article explains that an undeclared CSS custom property can invalidate an entire shorthand declaration at computed-value time. It contrasts this with longhand declarations, where only the declaration using the missing custom property is invalidated, and recommends defining the property or providing a fallback.

## Source excerpt

I've already written about how the fact that the initial value of a custom property is a guaranteed-invalid value can lead to unexpected results. Today, I realized how that can be problematic when you use custom properties in shorthand properties. A quick recap When you set a valid value for a property followed by another declaration with an invalid value, the second declaration will be ignored. div { background-color: #F00; background-color: fcktrmp; } /* Result: #F00 background */ That's one of the reasons why CSS is so great. It's forgiving. When the value in the second declaration is a custom property that doesn't exist, the declaration is not ignored. Either the property's inherited value or its initial value, depending on whether the property is inherited or not, will be used instead. div { background-color: #F00; background-color: var(--not-set); } /* Result: transparent background */ You can learn more about that in Day 1: custom properties and fallbacks and Invalid at computed-value time. Invalid custom properties in short hand properties Okay, now that we know that undeclared custom properties are invalid, let's see what happens when we use them in shorthand properties. div { border-style: solid; border-width: 20px var(--border--inline) 10px; } The --border-inline custom property doesn't exist, which means it's invalid. That's enough to invalidate the entire declaration. We get a different result if we don't use the shorthand property because the missing custom property only invalidates one property. div { border-style: solid; border-block-start-width: 20px; border-inline-width: var(--border--inline); border-block-end-width: 10px; } For the sake of completeness, here's how it looks like when the property exists. div { --border-inline: 30px; border-style: solid; border-block-start-width: 20px; border-inline-width: var(--border-inline); border-block-end-width: 10px; } Of course, you're also save if you provide a fallback for your custom property. div { borde