Cómo poner una línea horizontal
Pon <hr> entre dos bloques de contenido. No tiene etiqueta de cierre:
Por defecto, la línea ocupa todo el ancho de su contenedor, tiene un pequeño margen arriba y abajo, y se dibuja como un borde gris fino con estilo inset (un borde claro y otro oscuro).
<hr> significa horizontal rule. En HTML indica una separación temática: un cambio de tema o de escena dentro de una sección. Los lectores de pantalla lo anuncian como separador. Si solo quieres una línea decorativa (bajo un encabezado, alrededor de una tarjeta), dibújala con un borde CSS en ese elemento.
Dar estilo a un hr con CSS
El aspecto por defecto viene de los bordes, así que la forma fiable de dar estilo a un <hr> es quitarlos y dibujar tú un borde:
| Para cambiar | Usa |
|---|---|
| Color | border-top: 2px solid #2563eb (después de border: none) |
| Grosor | El ancho de ese borde, como 6px |
| Estilo | solid, dashed, dotted, double |
| Longitud | width: 40%, más margin-inline: auto para centrarlo |
| Extremos redondeados | height + background + border-radius en lugar de un borde |
| Espacio alrededor | margin |
Poner solo color: blue en un hr sí cambia la línea en los navegadores actuales, pero el estilo inset por defecto la sombrea y conserva una altura de 2px. Reiniciar el borde te da exactamente lo que pides.
Atributos antiguos de hr
El código antiguo usa atributos en la propia etiqueta:
<hr size="4" width="50%" color="red" noshade align="left">
size, width, color, noshade y align están obsoletos. Los navegadores todavía los aplican para que las páginas antiguas se vean bien, pero son HTML no válido y más difíciles de cambiar después. Sustitúyelos por el CSS de arriba.
Un separador con texto en el medio
La línea con "o" entre dos botones de inicio de sesión no es un <hr> (un hr no puede contener texto). Es una fila flex con una línea dibujada a cada lado de la palabra:
Las dos piezas ::before y ::after ocupan cada una la mitad del espacio libre con flex: 1 y dibujan un borde superior. Cambia or por una palabra más larga y las líneas se encogen para ajustarse.
Líneas verticales
No existe una versión vertical de <hr>. Dibuja una línea vertical con un borde en un lado de un elemento, o con un elemento fino dentro de una fila flex:
border-inline-start pone la línea al inicio del texto, que es la izquierda en español y la derecha en árabe o hebreo, así que el diseño funciona en las dos direcciones.
Errores comunes
- Escribir
</hr>.<hr>es un elemento vacío. Con<hr>o<hr />basta. - Usar
<hr>como decoración. Los lectores de pantalla anuncian cada uno. Una línea puramente visual va en el CSS. - Dar estilo solo con
color. Reinicia el borde conborder: noney defineborder-top. - Usar
<br>o guiones bajos para dibujar líneas. Usa<hr>o un borde. Consulta salto de línea para ver para qué sirve<br>. - Usar atributos obsoletos. Pasa
size,width,colorynoshadeal CSS.
Preguntas frecuentes
¿Cómo pongo una línea horizontal en HTML?
Usa la etiqueta <hr> en su propia línea. Es un elemento vacío sin etiqueta de cierre, y dibuja una línea a todo el ancho de su contenedor.
¿Cómo cambio el color de un hr?
Quita el borde por defecto y dibuja el tuyo: hr { border: none; border-top: 2px solid #2563eb; }. Cambiar solo color también funciona, pero el estilo inset por defecto lo deja sombreado y en dos tonos.
¿Cómo hago un hr más grueso?
Define el ancho del borde: hr { border: none; border-top: 4px solid #111827; }. El atributo size de los tutoriales antiguos todavía funciona en los navegadores, pero está obsoleto, así que usa CSS.
¿Qué significa hr?
Horizontal rule (regla horizontal). En el HTML actual significa una separación temática: un cambio de tema o de escena entre párrafos. Los lectores de pantalla lo anuncian como separador.
¿Cómo hago una línea vertical en HTML?
HTML no tiene una etiqueta de línea vertical. Añade un borde a un lado de un elemento, como border-inline-start: 2px solid #e5e7eb, o usa un elemento estrecho con color de fondo dentro de una fila flex.
