Verificação HTML: CSS: "border-radius": X não é um valor "border-radius"

Sobre este problema HTML

A propriedade border-radius aceita de um a quatro valores, cada um dos quais deve ser um <length> ou <percentage> válido. Também pode especificar cantos elípticos usando um separador / com até quatro valores de cada lado. Qualquer valor que esteja fora desta sintaxe — como um número simples sem unidade, uma palavra-chave mal escrita, um valor negativo, ou uma referência var() que o validador não consegue resolver — irá desencadear este erro.

Aqui estão as razões mais comuns para este erro aparecer:

Unidades em falta: Escrever border-radius: 10 em vez de border-radius: 10px. CSS requer unidades explícitas para todos os valores de comprimento não-zero.
Palavras-chave inválidas: Usar uma palavra-chave como border-radius: large que não faz parte da especificação CSS.
Valores negativos: A propriedade border-radius não aceita comprimentos ou percentagens negativas.
Referências var() não resolvíveis: O validador W3C executa análise estática e não consegue avaliar propriedades personalizadas CSS. Se usar var(--my-radius) num atributo style inline, o validador não tem forma de confirmar se a variável contém um valor válido, por isso marca-a como erro.
Abreviação mal formada: Uso incorreto do separador / ou demasiados valores, como border-radius: 10px 5px / 20px 15px 10px 5px 3px.

Isto é importante para conformidade com padrões e consistência entre navegadores. Embora os navegadores sejam geralmente tolerantes e ignorem valores de propriedade inválidos, isto significa que o estilo falha silenciosamente — o seu elemento não obterá os cantos arredondados que pretendia. Detetar estes erros durante a validação ajuda a prevenir bugs visuais subtis.

Como corrigir

Adicione unidades a quaisquer valores numéricos simples (exceto 0, que não precisa de unidade).
Remova valores negativos — use 0 como valor mínimo.
Verifique a sintaxe da abreviação — pode fornecer de um a quatro valores, opcionalmente seguidos por / e mais um a quatro valores para raios elípticos.
Substitua referências var() não resolvíveis por valores estáticos para fins de validação, ou mova-as para um bloco <style> onde a propriedade personalizada está definida (embora o validador ainda possa marcar o uso de var()).
Use unidades válidas como px, em, rem, %, vw, etc.

Exemplos

Inválido: unidade em falta num valor não-zero

<div style="border-radius: 10;"></div>

Corrigido: adicionando a unidade correta

<div style="border-radius: 10px;"></div>

Inválido: valor negativo

<div style="border-radius: -5px;"></div>

Corrigido: usando um valor não-negativo

<div style="border-radius: 5px;"></div>

Inválido: palavra-chave não reconhecida

<div style="border-radius: round;"></div>

Corrigido: usando uma percentagem válida para uma forma circular

<div style="border-radius: 50%;"></div>

Inválido: `var()` em estilo inline que o validador não consegue resolver

<div style="border-radius: var(--my-radius);"></div>

Corrigido: definindo a propriedade personalizada numa folha de estilos

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Border Radius Example</title>
    <style>
      :root {
        --my-radius: 8px;
      }
      .rounded {
        border-radius: var(--my-radius);
      }
    </style>
  </head>
  <body>
    <div class="rounded">Rounded corners via custom property</div>
  </body>
</html>

Note que mesmo com a propriedade personalizada adequadamente definida, o validador CSS W3C pode ainda marcar o uso de var() porque executa análise estática sem avaliar propriedades personalizadas. Esta é uma limitação conhecida. Se a conformidade total do validador é importante, use valores estáticos diretamente:

<div style="border-radius: 8px;"></div>

Abreviação válida com raios elípticos

A sintaxe / permite-lhe definir raios horizontais e verticais separadamente:

<div style="border-radius: 10px 20px / 5px 15px;"></div>

Isto define raios horizontais de 10px e 20px (cantos alternados) e raios verticais de 5px e 15px, criando cantos elípticos. Ambos os lados do / seguem o mesmo padrão de um a quatro valores.