Fallback Values and var()
Provide fallback values in var() for when a custom property is undefined or invalid.
var() Fallback Syntax
The var() function accepts an optional second argument as a fallback value, used when the custom property is not defined.
.button {
background: var(--primary-color, royalblue);
/* Uses royalblue if --primary-color is not defined */
}When Fallbacks Apply
The fallback is used when:
- The property is not defined in scope
- The property has the value
initial - The property was declared with an invalid value for its context