CSS: Líneas divisorias <hr />

La etiqueta <hr />  se usa para mostrar una línea divisoria en nuestras páginas.

Sin estilos

Por defecto la línea se muestra de esta manera:

<hr />

Anchura y Altura

• width: modifica el ancho de la línea. Si no se define, la línea tendra el ancho máximo. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.). También se puede usar un valor en porcentaje, calculado a partir del ancho del elemento padre.
• height: modifica el alto de la línea. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.).

<hr style="height: 5px;" />

<hr style="height:1em; width:75%;" />

<hr style="height:10px; width:100px;" />

<hr style="height:1cm; width:6cm;" />

Color

• background-color: color de la línea.
• border-color ó color: color del borde de la línea. En Firefox debe usarse color. En Safari y Chrome se usa background-color y se debe incluir la propiedad height.

En ambos casos los valores deben ser colores (ver Colores RGB).

<hr style="background-color:red;" />

<hr style="color:red;" />

<hr style="background-color:red; height:1px;" />

<hr style="border-color:#ff66ff; height:8px;" />

<hr style="background-color:red; height:7px;" />

Borde

• border: define el borde de la línea. Cuando el valor es 0, se elimina el aspecto de la linea de estar hundida

<hr style="border:0; background-color:red; height:7px;" />

Márgenes

• margin-left: márgen del lado izquierdo. Por defecto es 0.
• margin-right: márgen del lado derecho. Por defecto es 0.

<hr style="margin-left:80px; background-color:red; height:7px;" />

<hr style="margin-left:20%; margin-right:50%; background-color:red; height:7px;" />

Ejemplos

<hr style="border: 2px dashed blue;" />

<hr style="border: 2px dotted blue;" />

<hr style="box-shadow: inset 0 20px 20px -20px #C70039; border:0; height:30px;" />

<hr style="box-shadow: 0 2px 3px 3px #557C55; border:0; height:0;" />

<hr style="border:4px solid #6B240C; background-color:#994D1C; height:5px;" />

<hr style="border:7px solid #EE9322; border-radius:30px;" />

---