April 29, 2013

Fade out a border with CSS

User2180108’s Questions:

I have a footer that has a dashed top border like so:

border-top:1px dashed #ddd;

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">

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!