CSS: “stroke-width”: valores negativos “-X” não são permitidos.

A propriedade stroke-width controla a espessura do contorno (stroke) desenhado ao redor de formas e texto, principalmente usada em SVG mas também aplicável a elementos HTML via CSS. De acordo com tanto a especificação SVG quanto o padrão CSS, stroke-width aceita apenas valores não-negativos — isto é, zero ou qualquer número positivo, opcionalmente com uma unidade de comprimento CSS como px, em, ou rem. Um número sem unidade também é válido e é interpretado nas unidades de utilizador do sistema de coordenadas atual.

Valores negativos são logicamente sem sentido para a largura de contorno porque não se pode desenhar um contorno com espessura negativa. Os navegadores tipicamente ignoram ou descartam a declaração inválida, significando que o contorno pode ser renderizado com uma largura padrão inesperada ou não ser renderizado de todo. Além de problemas de renderização, usar valores CSS inválidos causa erros de validação W3C, que podem indicar problemas de qualidade mais amplos no seu código e podem levar a comportamento imprevisível entre diferentes navegadores.

Uma causa comum deste erro é a geração dinâmica de valores — por exemplo, uma expressão CSS calc() ou uma variável de pré-processador que inadvertidamente produz um resultado negativo. Se a sua largura de contorno for computada, certifique-se de limitar o valor para que nunca fique abaixo de 0.

Como corrigir

1. Substitua valores negativos por 0 ou um número positivo. Se pretendia nenhum contorno visível, use 0. Se queria um contorno visível, use a espessura positiva apropriada.
2. Proteja valores computados. Se o valor vier de uma expressão calc() ou propriedade personalizada CSS, use max() para garantir que o resultado nunca seja negativo — por exemplo, stroke-width: max(0px, calc(10px - 15px)).
3. Verifique estilos inline e folhas de estilo. O erro pode aparecer tanto em atributos style inline quanto em CSS externo/interno. Procure no seu código por qualquer declaração stroke-width com um número negativo.

Exemplos

❌ Inválido: stroke-width negativo num elemento HTML

<p style="stroke-width: -1">Algum conteúdo</p>

Isto desencadeia o erro do validador porque -1 não é um valor permitido.

✅ Corrigido: stroke-width não-negativo

<p style="stroke-width: 0">Algum conteúdo</p>

Usar 0 remove o contorno completamente e é válido.

❌ Inválido: stroke-width negativo num elemento SVG

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="-3" fill="none"/>
</svg>

✅ Corrigido: stroke-width positivo num elemento SVG

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none"/>
</svg>

✅ Usando max() para limitar um valor computado

<div style="stroke-width: max(0px, calc(5px - 10px))">Algum conteúdo</div>

Aqui, calc(5px - 10px) produziria -5px, mas max(0px, ...) garante que o valor final seja 0px, mantendo o CSS válido.

Saiba mais:

MDN Reference

stroke-width - CSS: Cascading Style Sheets | MDN

→

MDN Reference

stroke-width - SVG: Scalable Vector Graphics | MDN

→

W3C Reference

SVG 2: The ‘stroke-width’ presentation attribute

→