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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-border-too-many-values-or-values-are-not-recognized
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

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

```html
<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).

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

### Correct: two components in any order

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

### Correct: different borders per side using longhand properties

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

### Correct: using side-specific shorthand properties

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