<p>The plain old horizontal rule below separates this paragraph</p>
<hr/>
<p>... from this paragraph.</p>

<h5>Here are some different styles of horizontal lines</h5>

<p>A blue horizontal line with outset border:</p>
<hr style="height: 15px; border: 5px outset #999999; background-color: #0000ff"/>

<p>An animated red horizontal line:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-width {
   from {
      width: 100%;
   }
   to {
      width: 5%;
   }
}
hr.animated-width {
   height: 6px;
   border: 0;
   text-align: center;
   background-color: #ff0000;
   -webkit-animation-name: animated-width;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-out;
}
</style>
<hr class="animated-width"/>
</div>

<p>A horizontal line with inset border and animated green gradient:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-gradient {
   from {
      background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   }
   to {
      background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#00ff00));
   }
}
hr.animated-gradient {
   height: 28px;
   border: 7px inset #999999;
   text-align: center;
   background-color: #009900;
   background: -moz-linear-gradient(left top, #00ff00, #003300);
   background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   -webkit-animation-name: animated-gradient;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-in-out;
}
</style>
<hr class="animated-gradient"/>
</div>