I like to use HR tags. I use the technique in the first example below, but occasionally want a nicer separator, and hate having to use a graphic to show that chiseled aqua-style divider or to created the faded line of a gradient. Examples 2 and 3 use background gradients in webkit and mozilla. All versions of IE just show the solid rule.

Normal

Demo

HTML & CSS

<hr />


hr {
  background: #ddd; 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 0 0 1.4em;
  border: none; 
}

With Faded Edges

Demo

HTML & CSS

<hr class="faded" />


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%
  );
}

Carved

Demo

HTML & CSS

<hr class="carved" />


hr.carved {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.5, rgb(221,221,221)),
      color-stop(0.5, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      center top,
      rgb(221,221,221) 50%,
      rgb(255,255,255) 50%
  );
}