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>