CSS3 <hr> Styling

hr.css

body {
   padding: 50px;    
}

hr {
   margin: 50px 0;   
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

hr.style-four {
    height: 6px;
    border: 0;
    box-shadow: inset 0 6px 6px -6px black;
}

hr.style-five {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 1px black;
}​

hr.html

<!-- Gradient color1 - color2 - color1 -->
<hr class="style-one">

<!-- Gradient transparent - color - transparent -->
<hr class="style-two">

<!-- Double-color dashed line -->
<hr class="style-three">

<!-- Single-direction drop shadow -->
<hr class="style-four">

<!-- Cloud -->
<hr class="style-five">​