Fade out a border with CSS - css

Question

I have a footer that has a dashed top border like so:
footer
{
border-top:1px dashed #ddd;
color:#999;
}
I was wondering how I would be able to make the dashed line fade out from left to right. Thanks!

Answer 1

There may be a simpler solution, but one is to put a gradient that fades from left to right that covers the border, e.g.
footer:before {
content: "";
background-color: black;
height: 1px;
display: block;
top: -1px;
position: relative;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
http://jsfiddle.net/tcs6J/1/

Answer 2

You can create this using CSS Gradients. Check here.
To make it as simple as possible, start off by creating two divs:
<div id="borderbox">
<div id="box">
</div>
</div>
We will use the outer box and give it a Gradient Background and then give a white background to the inner div, thus faking the border.
#borderbox {
background-color: #eee; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(to right, #000, #fff); /* For Chrome and Safari */
background-image: -moz-linear-gradient(to right, #000, #fff); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(to right, #000, #fff); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(to right, #000, #fff); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to right, #000, #fff); /* Standard syntax; must be last */
width: 500px;
height: 200px;
display: block;
padding: 1px 0 0 0;
opacity: 0.5;
border-top: 1px dashed #ccc;
}
#box { background: #fff; width: 500px; height: 200px; margin-top: -1px; }
Demo: http://jsfiddle.net/XwJEB/1