Cambiar el grosor de la etiqueta hr con CSS

Introducción

La etiqueta hr en HTML genera una línea horizontal que separa secciones de una página. Por defecto suele mostrarse muy fina, entre 1 y 2 píxeles, y con un color básico. En un diseño moderno es habitual personalizar su grosor y estilo para que encaje con la identidad visual del sitio. A continuación verás métodos sencillos con CSS para modificar el grosor de la etiqueta hr y lograr un aspecto limpio y coherente.

Diferentes enfoques para cambiar el grosor

Enfoque 1 con height y background color

Este enfoque anula el borde predeterminado del elemento y usa la propiedad height para controlar el espesor. El paso a paso recomendado es asignar una clase a la etiqueta hr, eliminar el borde con border none y definir el grosor con height. Para darle color uniforme aplica background color al valor que prefieras.

Ejemplo práctico básico Crea una línea de 4 px en gris medio. Pasos: asigna una clase, elimina el borde, define height 4 px y aplica un background color hexadecimal gris como 666.

Ejemplo con degradado Si buscas un estilo más actual, sustituye el color sólido por un degradado lineal. Define height 6 px y usa un fondo con un gradiente de dos tonos, por ejemplo un coral y un turquesa, para lograr una transición suave a lo largo de la línea.

Enfoque 2 con border

En lugar de modificar la altura, puedes dar estilo al borde superior del elemento. Primero elimina todos los bordes con border none y después define border top con el grosor deseado, el estilo y el color que necesites.

Ejemplo con borde sólido Configura una línea de 5 px de grosor con estilo solid y color rojo. Este patrón es ideal para separadores muy visibles o llamadas de atención.

Ejemplo con borde discontinuo Configura una línea de 3 px con estilo dashed y un color azul vibrante. Es una buena opción para separar bloques secundarios sin robar protagonismo.

Consejos útiles

Ajusta el espacio exterior con margin top y margin bottom para controlar la distancia con el contenido adyacente. Ambos enfoques son compatibles con los navegadores modernos. También puedes combinarlos, por ejemplo, usar un degradado de fondo con una ligera línea superior para efectos más sofisticados.

Cómo encaja en un proyecto profesional

La personalización de la etiqueta hr parece un detalle mínimo, pero suma en consistencia visual, accesibilidad y experiencia de usuario. En Q2BSTUDIO integramos estos detalles dentro de un diseño integral cuando creamos aplicaciones a medida y software a medida, optimizando rendimiento, SEO técnico y mantenibilidad del front end. Si necesitas un equipo que construya una interfaz cuidada y escalable, descubre nuestro servicio de desarrollo de aplicaciones y software multiplataforma.

Qué más puede hacer Q2BSTUDIO por tu empresa

Además de front end y UX, somos especialistas en inteligencia artificial, ia para empresas y agentes IA, diseñando modelos y automatizaciones que se integran con tus procesos. También trabajamos ciberseguridad y pentesting, servicios cloud aws y azure, y servicios inteligencia de negocio con power bi para transformar datos en decisiones. Si buscas una estrategia de IA alineada con tu producto digital, conoce nuestros servicios de inteligencia artificial.

Conclusión

Para cambiar el grosor de la etiqueta hr con CSS puedes optar por dos vías sencillas. Uno, usar height y background color tras eliminar el borde por defecto. Dos, utilizar border top con el grosor, estilo y color que prefieras. Ambas técnicas te dan control total sobre la apariencia del separador y permiten mantener un diseño coherente con tu marca. En Q2BSTUDIO aplicamos estos principios en proyectos de aplicaciones a medida y software a medida, sumando buenas prácticas de rendimiento, accesibilidad, ciberseguridad, servicios cloud aws y azure e inteligencia de negocio con power bi para ofrecer productos sólidos y listos para escalar.