HTML Guides for undefined

A border-top, border-right, border-bottom or border-left declaration, or one of their -color longhands, has the word undefined where CSS expects a color.

CSS has no undefined keyword. It's the text JavaScript produces when a variable that was never set is joined into a string, so "1px solid " + color becomes 1px solid undefined when color has no value. It usually turns up in inline styles that a template or a server-rendered component builds from a color setting someone left empty.

The wording depends on the property. For a side shorthand such as border-bottom, the validator says undefined is not a "color" value, because the color is the part it can't read. For a longhand such as border-top-color, it names the property itself. Browsers ignore the whole declaration in both cases. With a shorthand, the width and style go with it, and that side of the box ends up with no border.

Fix the code that builds the style string. Leave the declaration out when there's no color, or fall back to a default such as currentcolor or a fixed hex value.

Invalid example

<div style="border-top: 1px solid undefined; border-bottom-color: undefined;">

Order summary

</div>

Valid example

<div style="border-top: 1px solid #d0d7de; border-bottom-color: #0055aa;">

Order summary

</div>

In the code that builds the style, check for a value before you write the declaration:

<script>

function sideBorder(side, color) {

if (!color) return "";

return `border-${side}: 1px solid ${color};`;

}

</script>

The value of a custom property has a calc(), min(), max() or clamp() expression with a word where a number should be, such as undefined left behind by a script.

The name in the message is the custom property (any name starting with --), and the letter is the first letter of the word the validator found. Inside a math function it tries to read each operand as a number, so calc(undefined * 1px) reports "Character u", calc(10px + auto) reports "Character a", and calc(px * 2) reports "Character p". The constants pi, infinity and NaN are allowed there and don't trigger it.

The validator is stricter than browsers here. A custom property accepts almost any value, and browsers don't check the math inside it when they read the stylesheet, so they keep the declaration. The validator still checks math functions inside custom properties, although it lets a plain --button-min-width: undefined through without a message.

The value is broken all the same, and it shows where the variable is used. With min-width: var(--button-min-width), the browser substitutes calc(undefined * 1px), which isn't a valid length, so min-width behaves as if it were unset. A fallback such as var(--button-min-width, 120px) doesn't help: it only applies when the custom property isn't set at all.

The word is usually undefined, printed by a script or template that writes the style from a JavaScript variable that was never set. Fix the script so the variable always holds a number, or leave the declaration out when there is no value. If a theme, plugin or site builder generates the CSS, the fix belongs in its settings or with its developer. Inside the math, var() is accepted, so calc(var(--button-columns, 1) * 120px) is fine.

Invalid example

<button type="button" style="--button-min-width: calc(undefined * 1px);">Add to cart</button>

Valid example

<button type="button" style="--button-min-width: calc(120 * 1px);">Add to cart</button>

A max-width declaration holds a value the property doesn't accept, often the word undefined printed by a script or template in place of a missing value.

JavaScript turns a missing value into the text undefined when it builds a string, so "max-width: " + options.maxWidth produces max-width: undefined. Appending a unit gives undefinedpx, arithmetic on a missing number gives NaNpx, and a null variable prints null. The validator quotes whatever ended up in the CSS, and it reports made-up keywords such as full with the same message.

A browser that can't parse the value drops the declaration. The element keeps the max-width from an earlier rule, or has no limit at all, so an image or text block meant to stay narrow can stretch to the full width of its container.

Fix the code that generates the value. Give the variable a default, for example options.maxWidth ?? "100%", or leave the declaration out when there's no value. The property accepts none (its initial value, meaning no limit), lengths such as 600px or 40rem, percentages of the containing block's width, the keywords min-content, max-content and fit-content, the fit-content() function, calc() expressions, and global keywords such as inherit. A number with no unit, such as 600, gets a different validator message asking for a unit.

Invalid example

<img src="harbor.jpg" alt="Fishing boats moored in the harbor" width="1200" height="800" style="max-width: undefined;">

Valid example

<img src="harbor.jpg" alt="Fishing boats moored in the harbor" width="1200" height="800" style="max-width: 100%;">