CSS: “border”: Demasiados valores o valores no reconocidos.

La propiedad abreviada border te permite establecer el ancho, estilo y color del borde de un elemento en una sola declaración. La especificación CSS permite hasta tres valores, cada uno correspondiente a una de las propiedades expandidas: border-width, border-style y border-color. Cada componente puede aparecer como máximo una vez, y el navegador determina qué valor se mapea con qué componente basándose en el tipo de valor. Cuando el validador encuentra más valores de los esperados o un valor que no puede asociar con ninguno de los tres componentes, genera este error.

Este error ocurre comúnmente por varias razones:

• Demasiados valores — Proporcionar cuatro valores (como podrías hacer con margin o padding) no funciona con border. A diferencia de las propiedades de espaciado del modelo de caja, border no acepta valores por lado en su forma abreviada.
• Palabras clave mal escritas — Un error tipográfico como sollid en lugar de solid, o doted en lugar de dotted, produce un valor no reconocido.
• Valores inválidos o no soportados — Usar valores que no pertenecen a ninguno de los tres componentes, como border: 2px solid black inset (mezclando forma abreviada con un estilo que crea un duplicado).
• Espacios faltantes — Escribir 1pxsolid black en lugar de 1px solid black crea un token no reconocido.
• Usar sintaxis de border para border-radius u otras propiedades — Colocar accidentalmente valores como 5px 10px 5px 10px en border en lugar de en border-radius.

Solucionar el problema significa asegurar que tu valor border contenga solo valores reconocidos, con no más de uno de cada categoría:

• Ancho: Una longitud (ej., 1px, 0.5em), 0, o una palabra clave (thin, medium, thick).
• Estilo: Uno de none, hidden, dotted, dashed, solid, double, groove, ridge, inset o outset.
• Color: Cualquier color CSS válido (ej., red, #333, rgb(0, 0, 0), transparent).

Si necesitas diferentes bordes en cada lado, usa las propiedades específicas por lado (border-top, border-right, border-bottom, border-left) o las propiedades expandidas individuales (border-width, border-style, border-color), que sí aceptan múltiples valores para cada lado.

Ejemplos

Incorrecto: demasiados valores

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

Esto proporciona dos valores de ancho (1px y 2px), lo cual la forma abreviada border no permite. Si quieres diferentes anchos por lado, usa border-width por separado.

Incorrecto: palabra clave mal escrita

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

El valor sollid no es un estilo de borde reconocido, lo que hace que el validador rechace la declaración.

Incorrecto: sintaxis de cuatro valores usada en border

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

La forma abreviada border no soporta valores por lado. Esta sintaxis es válida para border-width, no para border.

Correcto: forma abreviada estándar con los tres componentes

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

Correcto: omitir componentes opcionales

No necesitas proporcionar los tres valores. Cualquier componente omitido se restablece a su valor inicial (medium, none y currentcolor respectivamente).

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

Correcto: dos componentes en cualquier orden

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

Correcto: diferentes bordes por lado usando propiedades expandidas

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

Correcto: usar propiedades abreviadas específicas por lado

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

Más información:

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

→