Is it possible to make a gradient border?

Question

As the title states, is it possible to make a gradient border in CSS3 and if so how? I know that you can make gradient backgrounds and there are many generators for that, bu

Answer 1

i used the span element instead to use as border by setting its css property. below is my code

n here is my css -

   #main_container{
    position:relative;
    width:480px;
    height:480px;
    background:#f9f9f9;
    border:1px solid #ff0000;
    left:20%;
    top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%;  }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; } 
.borderH{
    position: absolute; left: 0; top: 50%;height:1px;width:100%;
    background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
    position: absolute; top: 0; left: 50%;width:1px;height:100%; 
    background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}

this code will generate the output like this https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing