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

Acerca de este problema HTML

La propiedad border-width controla el grosor del borde de un elemento. Según la especificación CSS, sus valores aceptados se dividen en dos categorías:

Valores de longitud — cualquier longitud CSS válida como 1px, 0.25em, 2rem, 3pt, o 0.1cm. El valor no debe ser negativo.
Palabras clave — exactamente tres están definidas: thin, medium y thick. Estas se mapean a tamaños definidos por la implementación pero garantizan mantener la relación thin ≤ medium ≤ thick.

Un número desnudo como 5 (sin unidad) no es válido, aunque algunos navegadores pueden aceptarlo silenciosamente. De manera similar, palabras como large, bold, normal, o valores de color como red no son valores válidos de border-width. Los valores de porcentaje (ej., 10%) tampoco son aceptados para border-width, a diferencia de muchas otras propiedades CSS que aceptan longitudes.

Esto importa por varias razones. Primero, los valores CSS inválidos causan que la declaración sea ignorada completamente, lo que significa que el borde puede no renderizarse como se pretende — o puede volver al valor inicial de medium, produciendo resultados inesperados. Segundo, depender del comportamiento de recuperación de errores del navegador lleva a renderizado inconsistente entre diferentes navegadores y versiones. Tercero, CSS válido asegura que tus hojas de estilo sean mantenibles y predecibles.

Las causas comunes de este error incluyen:

Unidades faltantes — escribir border-width: 2 en lugar de border-width: 2px. La única longitud sin unidades permitida en CSS es 0.
Palabras clave mal escritas o inventadas — usar large, small, normal, o none en lugar de thin, medium, o thick.
Tipo de valor incorrecto — usar accidentalmente un nombre de color, porcentaje, u otro valor que no sea de longitud.
Errores tipográficos en unidades — escribir 5xp en lugar de 5px.

Para solucionar el problema, localiza la declaración border-width problemática y reemplaza el valor inválido con una longitud CSS apropiada (incluyendo su unidad) o una de las tres palabras clave aceptadas.

Ejemplos

Inválido: usando una palabra clave no existente

<style>
  .box {
    border-style: solid;
    border-width: large; /* "large" no es un valor válido de border-width */
  }
</style>
<div class="box">Contenido</div>

Corregido: usando una palabra clave válida

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

Inválido: unidad faltante en un número

<style>
  .alert {
    border: solid;
    border-width: 3; /* número sin unidades no es válido */
  }
</style>
<div class="alert">Advertencia</div>

Corregido: agregando una unidad apropiada

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

Inválido: usando un porcentaje

<style>
  .panel {
    border-style: solid;
    border-width: 5%; /* los porcentajes no son válidos para border-width */
  }
</style>
<div class="panel">Panel</div>

Corregido: usando un valor de longitud en su lugar

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

Usando múltiples valores con shorthand

La propiedad border-width acepta de uno a cuatro valores (para arriba, derecha, abajo, izquierda), y cada uno debe ser independientemente válido:

<style>
  .card {
    border-style: solid;
    border-width: thin 2px medium 1px;
  }
</style>
<div class="card">Contenido de la tarjeta</div>

Reemplaza cualquier valor inválido de border-width con una longitud CSS reconocida (siempre incluyendo la unidad, excepto para 0) o una de las palabras clave thin, medium, o thick para resolver el error de validación.