April 29, 2013
Fade out a border with CSS
User2180108’s Questions:
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!
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; }
