Las reglas horizontales por defecto (<hr>) en HTML son bastante feas, con el siguiente código CSS le podremos dar un aspecto de difuminado bastante elegante.

Nos quedaría una regla horizontal como ésta:

Vamos con el código

CSS

hr.faded {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(221,221,221)),
      color-stop(0.9, rgb(221,221,221)),
      color-stop(1, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(221,221,221) 10%,
      rgb(221,221,221) 90%,
      rgb(255,255,255) 100%
  );
}

HTML

<hr class="faded" />

Y así de fácil y sencillo obtenemos una elegante regla horizontal (<hr>) con unas pocas líneas de CSS.