CSS: “border”: Too many values or values are not recognized.

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>

Learn more:

MDN Reference

MDN Web Docs: border - CSS: Cascading Style Sheets

→

MDN Reference

CSS border shorthand property - MDN Web Docs

→

web.dev Article

Learn CSS: Borders - web.dev

→