Personalizar nuestro separador de entradas

Hoy vamos a hablaros de como podemos personalizar nuestro separador de la entradas de nuestro blog a nuestro gusto y de forma rápida.

Introducción

Esta etiqueta se usa para separar el contenido, o definir un cambio en el post.
Por norma general en nuestro blog en la edición HTML se mostrara de esta forma:

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;}

Esta etiqueta es visible por todos los navegadores.
Como por ejemplo: Google, Firefox, Opera, Safari, Internet Explorer.. ect

Como se hace?

Esta etiqueta lo podemos poner diferentes atributos como :

Height:

 Con este atributo hacemos que nuestra linea cambie de tamaño de anchura.
También podemos hacerlo con los atributos de pixeles o porcentajes.

 hr{
   width:300px;
 }
hr{
   width:50%;
 }

Quedaría algo así:

hr {
 height: 5px;  

Background-color:

 Con este atributo hacemos que nuestra linea cambie de color:
En este caso añadimos a nuestro código este atributo de esta forma:

hr {
 height: 5px;   
background-color: #FF000

Quedaría de esta forma

Cambiando los bordes

 También tenemos la opción de usar diferentes tipos de bordes como:
Dashed, dotted, ect..
Aquí dejo algunos 

 Y nos quedaría así:

hr {
    border: 1px dashed #278e79;
  }

Cambiando a caja

Si queremos que nuestra linea se convierta en una caja solo tenemos que hacer la barra mas alta y dejar los bordes.
También podemos poner un color de relleno a la caja y el borde mas ancho.

hr {
    border: 2px solid #4bceb4; 
background-color: #ffff00; height: 8px;                 }

Dos lineas paralelas

Si queremos que nuestra linea se convierta en una linea paralela dejamos solo las lineas superiores y le damos mas altura.
  Podemos cambiar el tipo de borde por el que queramos

 hr {
   border-top: 2px solid #4bceb4;
   border-bottom: 2px solid #4bceb4;
   border-left:none;
   border-right:none;
   height: 6px;
 }

Jugando con los códigos podemos también redondear los bordes con la propiedad border-radius

 hr {
   border: 5px solid #4bceb4;
   border-radius: 300px ;
   height: 0px;
   text-align: center;
 }

E incluso darle un toque con valores verticales y horizontales para cada esquina.

 hr {
   border: 5px solid #4bceb4;
   border-radius: 200px /8px;
   height: 0px;
   text-align: center;
 }

Poner una imagen

También podemos añadir una imagen con el siguiente código.

hr {
  height: 20px;
  background:url(URL DE TU IMAGEN) repeat center;
  border: none;
 }

Si queremos poner una imagen que no se repita cambiamos lo marcado en rojo por no-repeat