how to add gradient to borders

Question

i was wondering if its possible to add gradients to border top without it affecting border right or border left which in this case are transparent. i tried adding a gradient color but it would affect border left and border right im trying to let border left and border right to be transparent

#borderone {
        border-top: 33px solid #354658;
        border-left: 33px solid transparent;
        border-right: 33px solid transparent;
        margin: 0 auto;
        min-width: 1277px;
    }
    <div id='borderone'></div>

as you can see this is what i want it to do although i want a gradient background color instead of this solid dark blue color http://jsfiddle.net/EHELN/

Answer 1

See this : http://css-tricks.com/examples/GradientBorder/

It is enough for me in my career .

For example:

 #borderone:first-child:before {
    content:'';
    position:absolute;
    width:100%;
    height:4px;
    background:linear-gradient(to left, #354658, #9EBBDA);
    top:-33px;
    left:-5;
}

For your case , you should use before & first-child pseudo-selectors CSS in the same time.

top(in pseudo selector) = -border height = -33 px 

FIDDLE: http://jsfiddle.net/abdennour/EHELN/2/