# CSS: “border-X”: “undefined” is not a “color” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-border-side-undefined-is-not-a-color-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<div style="border-top: 1px solid undefined; border-bottom-color: undefined;">
  Order summary
</div>
```

## Valid example

```html
<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:

```html
<script>
  function sideBorder(side, color) {
    if (!color) return "";
    return `border-${side}: 1px solid ${color};`;
  }
</script>
```