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

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

The `border` shorthand property accepts up to three values: a width (e.g., `1px`), a style (e.g., `solid`), and a color (e.g., `black`). When the validator encounters `"undefined"` in the color position, it rightfully rejects it because `undefined` is not a recognized CSS color keyword, hex value, or color function.

This issue most commonly appears in projects that use JavaScript to dynamically set inline styles. When a variable intended to hold a color value is `undefined`—perhaps because it wasn't initialized, a configuration value is missing, or a function didn't return a result—the rendered HTML ends up with a literal `style="border: 1px solid undefined"` in the markup. Build tools, templating engines, or server-side rendering can also produce this output if a variable isn't properly resolved.

Beyond failing validation, this is a real problem because browsers will discard the entire `border` declaration when they encounter an invalid value. This means the border won't render at all, which may break your layout or visual design in ways that are hard to debug. Ensuring valid CSS values keeps your styling predictable across all browsers.

## How to fix it

1. **Check for dynamic values.** If the color is set via JavaScript or a templating engine, ensure the variable always resolves to a valid color string. Add fallback values or default assignments.
2. **Replace the invalid value.** Substitute `undefined` with a proper CSS color — a named color (`red`, `black`), a hex code (`#333`), an `rgb()` or `hsl()` function, or even `transparent` or `currentcolor`.
3. **Remove the declaration.** If no border is needed, remove the `border` property entirely rather than leaving an invalid value in place.

## Examples

### Incorrect: literal `undefined` as a color value

```html
<div style="border: 1px solid undefined;">Content</div>
```

The validator rejects `undefined` because it is not a valid CSS color.

### Incorrect: JavaScript producing `undefined` in markup

```html
<script>
  const borderColor = undefined; // missing configuration
  document.getElementById("box").style.border = "2px dashed " + borderColor;
</script>
```

This produces `border: 2px dashed undefined` on the element.

### Correct: using a valid color value

```html
<div style="border: 1px solid black;">Content</div>
```

### Correct: using a hex code or `rgb()` function

```html
<div style="border: 2px dashed #ff6600;">Content</div>

<div style="border: 3px dotted rgb(0, 128, 255);">Content</div>
```

### Correct: providing a fallback in JavaScript

```html
<div id="box">Content</div>
<script>
  const borderColor = getUserColor() || "#333";
  document.getElementById("box").style.border = "2px solid " + borderColor;
</script>
```

By using `|| "#333"`, you ensure a valid color is always applied even when `getUserColor()` returns `undefined`.

### Correct: using separate border properties

If you prefer more granular control, you can define each border sub-property individually:

```html
<div style="border-width: 1px; border-style: solid; border-color: black;">Content</div>
```

### Valid `border` shorthand reference

The `border` shorthand follows this pattern:

```css
selector {
  border: <width> <style> <color>;
}
```

- **Width:** `1px`, `2px`, `thin`, `medium`, `thick`
- **Style:** `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`, `none`
- **Color:** any valid CSS color — named colors (`red`, `blue`), hex (`#000`), `rgb()`, `hsl()`, `currentcolor`, or `transparent`

All three values are optional in the shorthand, but any value you do include must be valid. The string `undefined` is never a valid CSS value. If your styles are generated dynamically, always validate or sanitize the output before it reaches the HTML.