how to add gradient to borders - html

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/

Answer 2

You can get this efect using background for the gradient, and the 2 pseudo elements at the left and right to get the slanted corners
.test {
border-left: 33px solid transparent;
border-right: 33px solid transparent;
height: 33px;
background: linear-gradient(90deg, black, blue);
margin: 0 auto;
min-width: 42px;
background-clip: content-box;
position: relative;
}
.test:before, .test:after {
content: '';
position: absolute;
width: 33px;
height: 100%;
}
.test:before {
background: linear-gradient(45deg, transparent 50%, black 50%);
right: 100%;
}
.test:after {
background: linear-gradient(315deg, transparent 50%, blue 50%);
left: 100%;
}
demo
Looks like I missunderstood the direction. Try this to make it the other way (for webkit)
.test {
border-left: 33px solid transparent;
border-right: 33px solid transparent;
height: 33px;
background: linear-gradient(0deg, black, red);
margin: 0 auto;
min-width: 42px;
background-clip: content-box;
position: relative;
}
.test:before, .test:after {
content: '';
position: absolute;
width: 45px;
height: 45px;
bottom: 0px;
}
.test:before {
-webkit-transform: rotate(45deg);
-webkit-transform-origin: bottom right;
background: linear-gradient(-45deg, black 0, red 32px, transparent 32px);
right: 100%;
}
.test:after {
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: bottom left;
background: linear-gradient(45deg, black 0, red 32px, transparent 32px);
left: 100%;
}
demo 2

Answer 3

if you want to draw a gradient on your border, then you could use border-image or translucide borders with a gradient in bg : DEMO
But then :
You can even drop your translucide borders and make it a padding: DEMO
#borderone {
position:relative;
padding:33px 33px 0;/* well this is just like transparent borders :) */
margin: 0 auto;
height:100px;
background:linear-gradient(
to bottom,
#354658,
#9EBBDA 33px,
transparent 33px
);
}

Answer 4

http://www.colorzilla.com/gradient-editor/
This is for the background and not the border, but you can likely create the same effect you are looking for by using this tool.