Fade out a border with 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!

possible duplicate of ["Fade" borders in CSS](http://stackoverflow.com/questions/4520943/fade-borders-in-css) — Jean-Bernard Pellerin, Apr 29 '13 at 22:21
Can you add the dashed line to it's own div element? then you use use CSS3 Gradients to fade out the whole div (this would cause a problem if the element with the border included text) — Jason Sperske, Apr 29 '13 at 22:23
Jean-Bernard Pellerin, I wasn't sure there was a definitive answer for your linked question. — totallyuneekname, Apr 29 '13 at 22:24

score 8 · Answer 1 · answered Apr 29 '13 at 22:25

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/

Starx · Answer 2 · 2013-04-29T22:50:14.137

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

Argh. I was too slow to create the fiddle for the gradients. Here for reference: http://jsbin.com/imazaq/3/edit . Another way is to position a div with a half-transparent png image background. I think that is actually the best way. — webketje, Apr 29 '13 at 22:36

Fade out a border with CSS

2 Answers2