Verificação HTML: CSS: "border-width": X não é um valor de "border-width".

Sobre este problema HTML

A propriedade border-width controla a espessura da borda de um elemento. De acordo com a especificação CSS, os seus valores aceites dividem-se em duas categorias:

Valores de comprimento — qualquer comprimento CSS válido como 1px, 0.25em, 2rem, 3pt, ou 0.1cm. O valor não pode ser negativo.
Palavras-chave — exatamente três estão definidas: thin, medium e thick. Estas mapeiam para tamanhos definidos pela implementação, mas é garantido que mantêm a relação thin ≤ medium ≤ thick.

Um número simples como 5 (sem unidade) não é válido, mesmo que alguns navegadores possam aceitá-lo silenciosamente. Da mesma forma, palavras como large, bold, normal, ou valores de cor como red não são valores border-width válidos. Valores percentuais (por exemplo, 10%) também não são aceites para border-width, ao contrário de muitas outras propriedades CSS que aceitam comprimentos.

Isto é importante por várias razões. Primeiro, valores CSS inválidos fazem com que a declaração seja completamente ignorada, significando que a borda pode não ser renderizada como pretendido — ou pode recuar para o valor inicial de medium, produzindo resultados inesperados. Segundo, depender do comportamento de recuperação de erros do navegador leva a renderização inconsistente entre diferentes navegadores e versões. Terceiro, CSS válido garante que as suas folhas de estilo são mantíveis e previsíveis.

Causas comuns deste erro incluem:

Unidades em falta — escrever border-width: 2 em vez de border-width: 2px. O único comprimento sem unidade permitido em CSS é 0.
Palavras-chave mal escritas ou inventadas — usar large, small, normal, ou none em vez de thin, medium, ou thick.
Tipo de valor errado — usar acidentalmente um nome de cor, percentagem, ou outro valor que não seja de comprimento.
Erros de escrita nas unidades — escrever 5xp em vez de 5px.

Para corrigir o problema, localize a declaração border-width problemática e substitua o valor inválido por um comprimento CSS adequado (incluindo a sua unidade) ou uma das três palavras-chave aceites.

Exemplos

Inválido: usando uma palavra-chave inexistente

<style>
  .box {
    border-style: solid;
    border-width: large; /* "large" não é um valor border-width válido */
  }
</style>
<div class="box">Content</div>

Corrigido: usando uma palavra-chave válida

<style>
  .box {
    border-style: solid;
    border-width: thick;
  }
</style>
<div class="box">Content</div>

Inválido: unidade em falta num número

<style>
  .alert {
    border: solid;
    border-width: 3; /* número sem unidade não é válido */
  }
</style>
<div class="alert">Warning</div>

Corrigido: adicionando uma unidade adequada

<style>
  .alert {
    border: solid;
    border-width: 3px;
  }
</style>
<div class="alert">Warning</div>

Inválido: usando uma percentagem

<style>
  .panel {
    border-style: solid;
    border-width: 5%; /* percentagens não são válidas para border-width */
  }
</style>
<div class="panel">Panel</div>

Corrigido: usando um valor de comprimento em vez disso

<style>
  .panel {
    border-style: solid;
    border-width: 0.3em;
  }
</style>
<div class="panel">Panel</div>

Usando múltiplos valores com shorthand

A propriedade border-width aceita um a quatro valores (para cima, direita, baixo, esquerda), e cada um deve ser independentemente válido:

<style>
  .card {
    border-style: solid;
    border-width: thin 2px medium 1px;
  }
</style>
<div class="card">Card content</div>

Substitua qualquer valor border-width inválido por um comprimento CSS reconhecido (incluindo sempre a unidade, exceto para 0) ou uma das palavras-chave thin, medium ou thick para resolver o erro de validação.