Los separadores son líneas que se utilizan para separar contenidos de texto dándole una elegancia diferente.

A continuación te dejo los ejemplos:
Separador básico:



<hr>


Separador con anchura:


<hr width="50%"/>


Separador con anchura y alineado a la derecha:


Coloca en lugar de right, center si lo quieres al centro o left si es a la izquierda.
<hr width="50%" align="right"/>


Separador con tamaño:


<hr size="20"/>


Separador con color:


<hr color="#FF0000"/>


Separador con sombra:


<hr noshade="noshade"/>


También personalizándolo un poco más, le colocamos un poco de CSS:


Le podrás cambiar color de fondo del separador
El tamaño de cada uno de los bordes, estilos y colores
Lo alto del separador y lo ancho, así como la alineación del mismo.
<hr style="background-color:#333333; border-left:5px solid #009900; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #003366; height:10px; width:100%; align:center;" />

O si prefieres colocarle una imagen de fondo:


<hr style=" background-image:url(Url-de-tu-imagen); border-left:5px solid #003300; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #088A85; height:10px; width:100%; align:center;" />

Si necesitas otros estilos de bordes los puedes verlos en esta entrada.

Espero te sirvan en algo.

Leave a Reply