HTML Guides for border

The border shorthand property lets you set the width, style, and color of an element’s border in a single declaration. The CSS specification allows up to three values, each corresponding to one of the longhand properties: border-width, border-style, and border-color. Each component may appear at most once, and the browser determines which value maps to which component based on the value’s type. When the validator encounters more values than expected or a value it can’t match to any of the three components, it raises this error.

This error commonly occurs for several reasons:

• Too many values — Providing four values (like you might with margin or padding) doesn’t work with border. Unlike box-model spacing properties, border does not accept per-side values in its shorthand.
• Misspelled keywords — A typo like sollid instead of solid, or doted instead of dotted, produces an unrecognized value.
• Invalid or unsupported values — Using values that don’t belong to any of the three components, such as border: 2px solid black inset (mixing shorthand with a style that creates a duplicate).
• Missing spaces — Writing 1pxsolid black instead of 1px solid black creates an unrecognized token.
• Using border syntax for border-radius or other properties — Accidentally placing values like 5px 10px 5px 10px on border instead of on border-radius.

Fixing the issue means ensuring your border value contains only recognized values, with no more than one from each category:

• Width: A length (e.g., 1px, 0.5em), 0, or a keyword (thin, medium, thick).
• Style: One of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset.
• Color: Any valid CSS color (e.g., red, #333, rgb(0, 0, 0), transparent).

If you need different borders on each side, use the side-specific properties (border-top, border-right, border-bottom, border-left) or the individual longhand properties (border-width, border-style, border-color), which do accept multiple values for each side.

Examples

Incorrect: too many values

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

This provides two width values (1px and 2px), which the border shorthand does not allow. If you want different widths per side, use border-width separately.

Incorrect: misspelled keyword

<div style="border: 2px sollid red;">Content</div>

The value sollid is not a recognized border style, causing the validator to reject the declaration.

Incorrect: four-value syntax used on border

<div style="border: 1px 2px 1px 2px solid grey;">Content</div>

The border shorthand does not support per-side values. This syntax is valid for border-width, not for border.

Correct: standard shorthand with all three components

<div style="border: 2px solid black;">Content</div>

Correct: omitting optional components

You don’t need to provide all three values. Any omitted component resets to its initial value (medium, none, and currentcolor respectively).

<p style="border: solid;">Content</p>

Correct: two components in any order

<p style="border: dashed #00f;">Content</p>

Correct: different borders per side using longhand properties

<div style="border-width: 1px 2px 1px 2px; border-style: solid; border-color: grey;">Content</div>

Correct: using side-specific shorthand properties

<div style="border-top: 1px solid red; border-bottom: 2px dashed blue;">Content</div>

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

<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

<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

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

Correct: using a hex code or rgb() function

<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

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

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

Valid border shorthand reference

The border shorthand follows this pattern:

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.

<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:

<img src="..." alt="..." style="border:0;" />