Aplicar estilos al separador HR

HR es una de esas etiquetas que van cayendo en el olvido sin embargo es posible hacer cosas interesantes con esta etiqueta, que en un principio luce muy aburrida pero es posible con un poco CSS darle un poco de vida

HR con colores sólidos

Podría por ejemplo cambiarle el color con este código
[cc lang=»css»]
color: #f8b500;
background-color: #f8b500;
height: 5px;
border:none;
[/cc]
Y obtenemos:


HR punteada

No es necesario que nuestro separador sea sólido, podría ser punteado o con lineas entrecortadas
[cc lang=»css»]
color: #f8b500;
height: 0px;
border:1px dashed;
[/cc]


Separador con imágenes

No se puede directamente con CSS sobre un HR ya que los bordes siempre aparecen, sin embargo es posible para estos casos usar un div con un fondo de imagen