Acerca de este problema HTML
La propiedad border-style controla el patrón visual de un borde — si aparece como una línea sólida, una serie de puntos, guiones u otros estilos decorativos. Sus valores válidos son: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.
La palabra clave thick es un valor válido para border-width, que controla qué tan ancho o pesado aparece el borde. Es una de las tres palabras clave de ancho predefinidas: thin, medium y thick. Cuando thick se usa por error como un valor de border-style, el navegador no puede interpretar la declaración, y el borde puede no renderizarse en absoluto o puede recurrir a valores predeterminados inesperados.
Esta es una confusión común porque las personas a menudo piensan en un “borde grueso” como un concepto único, pero CSS separa la preocupación en dos propiedades distintas: el estilo (cómo se ve) y el ancho (qué tan grueso es). Ambas deben establecerse correctamente para que el borde se muestre según lo previsto. Sin un border-style válido, la mayoría de los navegadores por defecto usan none, lo que significa que no se ve ningún borde independientemente de otras propiedades del borde.
Para solucionar el problema, reemplaza thick en tu declaración de border-style con una palabra clave de estilo válida, y mueve thick a border-width si quieres un borde más pesado. Alternativamente, puedes usar la forma abreviada border para establecer ancho, estilo y color en una sola declaración.
Ejemplos
Incorrecto: usar thick como un estilo de borde
<div style="border-style: thick;">Este borde no se renderizará correctamente.</div>
El valor thick no es reconocido para border-style, por lo que la declaración es inválida.
Correcto: separar estilo y ancho
<div style="border-style: solid; border-width: thick;">Este tiene un borde sólido grueso.</div>
Aquí, solid define el patrón del borde y thick define el ancho del borde — cada valor se usa con la propiedad correcta.
Correcto: usar un ancho específico en píxeles
<div style="border-style: dashed; border-width: 4px;">Este tiene un borde discontinuo de 4px.</div>
Puedes usar cualquier valor de longitud (como 4px o 0.25em) para border-width en lugar de la palabra clave thick para un control más preciso.
Correcto: usar la forma abreviada border
<div style="border: thick solid #333;">Este usa la forma abreviada de border.</div>
La forma abreviada border acepta ancho, estilo y color en cualquier orden. Esta es a menudo la forma más concisa de definir un borde y evita confusión entre las propiedades individuales.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: