Validación HTML: CSS: "border-radius": X no es un valor de "border-radius"

Acerca de este problema HTML

La propiedad border-radius acepta uno a cuatro valores, cada uno de los cuales debe ser un <length> o <percentage> válido. También puedes especificar esquinas elípticas usando un separador / con hasta cuatro valores en cada lado. Cualquier valor que esté fuera de esta sintaxis — como un número sin unidad, una palabra clave mal escrita, un valor negativo, o una referencia var() que el validador no puede resolver — disparará este error.

Aquí tienes las razones más comunes por las que aparece este error:

Unidades faltantes: Escribir border-radius: 10 en lugar de border-radius: 10px. CSS requiere unidades explícitas para todos los valores de longitud que no sean cero.
Palabras clave inválidas: Usar una palabra clave como border-radius: large que no es parte de la especificación CSS.
Valores negativos: La propiedad border-radius no acepta longitudes o porcentajes negativos.
Referencias var() no resolubles: El validador de W3C realiza análisis estático y no puede evaluar propiedades personalizadas de CSS. Si usas var(--my-radius) en un atributo style en línea, el validador no tiene forma de confirmar que la variable contiene un valor válido, por lo que lo marca como error.
Abreviatura malformada: Uso incorrecto del separador / o demasiados valores, como border-radius: 10px 5px / 20px 15px 10px 5px 3px.

Esto importa para el cumplimiento de estándares y la consistencia entre navegadores. Aunque los navegadores son generalmente permisivos e ignorarán valores de propiedad inválidos, esto significa que el estilo falla silenciosamente — tu elemento no obtendrá las esquinas redondeadas que pretendías. Detectar estos errores durante la validación ayuda a prevenir errores visuales sutiles.

Cómo solucionarlo

Agrega unidades a cualquier valor numérico sin unidad (excepto 0, que no necesita unidad).
Elimina valores negativos — usa 0 como mínimo.
Verifica la sintaxis abreviada — puedes proporcionar de uno a cuatro valores, opcionalmente seguidos por / y de uno a cuatro valores más para radios elípticos.
Reemplaza referencias var() no resolubles con valores estáticos para propósitos de validación, o muévelos a un bloque <style> donde la propiedad personalizada esté definida (aunque el validador aún puede marcar el uso de var()).
Usa unidades válidas como px, em, rem, %, vw, etc.

Ejemplos

Inválido: unidad faltante en un valor distinto de cero

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

Solucionado: agregando la unidad correcta

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

Inválido: valor negativo

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

Solucionado: usando un valor no negativo

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

Inválido: palabra clave no reconocida

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

Solucionado: usando un porcentaje válido para una forma circular

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

Inválido: `var()` en estilo en línea que el validador no puede resolver

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

Solucionado: definiendo la propiedad personalizada en una hoja 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>

Ten en cuenta que incluso con la propiedad personalizada definida correctamente, el validador CSS de W3C aún puede marcar el uso de var() porque realiza análisis estático sin evaluar propiedades personalizadas. Esta es una limitación conocida. Si el cumplimiento completo del validador es importante, usa valores estáticos directamente:

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

Abreviatura válida con radios elípticos

La sintaxis / te permite definir radios horizontales y verticales por separado:

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

Esto establece radios horizontales de 10px y 20px (esquinas alternadas) y radios verticales de 5px y 15px, creando esquinas elípticas. Ambos lados del / siguen el mismo patrón de uno a cuatro valores.