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:
<hr>
:
Ejemplo
Intentemos cambiar el color de la línea usando la
propiedad CSS border-color:
<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):
<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):
<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:
<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:
<hr style="border-top: 1px dotted red;">
:
Ejemplo
Aumentemos el grosor de la línea usando la propiedad CSS
border-width:
<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:
<hr style="height: 10px; border: 1px solid red;">
:
Véase también
-
la etiqueta
br,
que define un salto de línea
