Sexy css tricks for fade out hr css from left and right

This is a good example of how CSS3 should be used. To provide additional effects to users with modern browsers, without relying on graphics, and have solid fallback (in this case just a black 1px line, for users in non-css3 supporting browsers.

EXAMPLE 1:

div{
    margin-top:50px;
}
<style>
.sexy_line{ 
    display:block;
    border:none;
    color:white;
    height:1px;
    background:black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
}
</style>

EXAMPLE 2:

<br><br><br>
<div class="fade_rule"></div>  
<br><br><br>
<div class="fade_rule"></div>  
<br><br><br>
<div class="fade_rule"></div> 

<style>
.fade_rule {
        height: 1px;
        background-color: #E6E6E6;
        width: 66.0em;
        margin: 0 auto;
        background-image: linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -o-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -moz-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -ms-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, white), color-stop(0.5, gray), color-stop(0.98, white) );
}
</style>