Etiqueta hr

La etiqueta hr define una línea divisoria horizontal. La ventaja de esta etiqueta es que para dibujar una línea simple, no es necesario crear bloques adicionales. No requiere etiqueta de cierre.

Ejemplo

Veamos cómo funciona la etiqueta hr:

html<hr>

Результат:

Ejemplo

Intentemos cambiar el color de la línea usando la propiedad CSS border-color:

html<hr style="border-color: red;">

Результат:

Ejemplo

El color de la línea también se puede cambiar con la propiedad color (si se especifican simultáneamente las propiedades color y border-color, la segunda tiene prioridad):

html<hr style="color: red">

Результат:

Ejemplo

Ahora cambiemos el color de la línea usando la propiedad CSS border. Tenga en cuenta que la línea se volverá del doble de grosor (porque hemos definido un borde tanto en la parte superior como en la inferior):

html<hr style="border: 1px solid red;">

Результат:

Ejemplo

Intentemos cambiar el color de la línea con la propiedad CSS border-top, y definamos solo el borde superior. Ahora no habrá línea doble:

html<hr style="border-top: 1px solid red;">

Результат:

Ejemplo

Hagamos una línea de puntos usando la propiedad CSS border-top, establezcamos el valor dotted en lugar de solid:

html<hr style="border-top: 1px dotted red;">

Результат:

Ejemplo

Aumentemos el grosor de la línea usando la propiedad CSS border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Ejemplo

Y ahora agreguemos altura height a la línea y un borde mediante border. El borde se dividirá en superior e inferior:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Véase también