CSS: “border”: demasiados valores ou valores não reconhecidos.

A propriedade abreviada border permite definir a largura, estilo e cor da margem de um elemento numa única declaração. A especificação CSS permite até três valores, cada um correspondendo a uma das propriedades longas: border-width, border-style e border-color. Cada componente pode aparecer no máximo uma vez, e o navegador determina qual valor corresponde a qual componente com base no tipo do valor. Quando o validador encontra mais valores do que esperado ou um valor que não consegue corresponder a nenhum dos três componentes, gera este erro.

Este erro ocorre comumente por várias razões:

• Demasiados valores — Fornecer quatro valores (como você pode fazer com margin ou padding) não funciona com border. Ao contrário das propriedades de espaçamento do modelo de caixa, border não aceita valores por lado na sua forma abreviada.
• Palavras-chave mal escritas — Um erro de digitação como sollid em vez de solid, ou doted em vez de dotted, produz um valor não reconhecido.
• Valores inválidos ou não suportados — Usar valores que não pertencem a nenhum dos três componentes, como border: 2px solid black inset (misturar abreviação com um estilo que cria uma duplicação).
• Espaços em falta — Escrever 1pxsolid black em vez de 1px solid black cria um token não reconhecido.
• Usar sintaxe de border para border-radius ou outras propriedades — Colocar acidentalmente valores como 5px 10px 5px 10px em border em vez de border-radius.

Corrigir o problema significa garantir que o seu valor border contém apenas valores reconhecidos, com não mais que um de cada categoria:

• Largura: Um comprimento (ex: 1px, 0.5em), 0, ou uma palavra-chave (thin, medium, thick).
• Estilo: Um de none, hidden, dotted, dashed, solid, double, groove, ridge, inset, ou outset.
• Cor: Qualquer cor CSS válida (ex: red, #333, rgb(0, 0, 0), transparent).

Se precisar de margens diferentes em cada lado, use as propriedades específicas por lado (border-top, border-right, border-bottom, border-left) ou as propriedades longas individuais (border-width, border-style, border-color), que aceitam múltiplos valores para cada lado.

Exemplos

Incorreto: demasiados valores

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

Isto fornece dois valores de largura (1px e 2px), o que a propriedade abreviada border não permite. Se quer larguras diferentes por lado, use border-width separadamente.

Incorreto: palavra-chave mal escrita

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

O valor sollid não é um estilo de margem reconhecido, fazendo com que o validador rejeite a declaração.

Incorreto: sintaxe de quatro valores usada em border

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

A propriedade abreviada border não suporta valores por lado. Esta sintaxe é válida para border-width, não para border.

Correto: propriedade abreviada padrão com os três componentes

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

Correto: omitir componentes opcionais

Não precisa fornecer os três valores. Qualquer componente omitido é reiniciado para o seu valor inicial (medium, none e currentcolor respetivamente).

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

Correto: dois componentes em qualquer ordem

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

Correto: margens diferentes por lado usando propriedades longas

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

Correto: usar propriedades abreviadas específicas por lado

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

Saiba mais:

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

→