Top border with gradient using css
border, css, xhtml
Solution
you could use an image http://border-image.com/ or use a pseudo element over your border :
.bordertest {
height:300px;
width:300px;
border-top:30px solid #c4268c;
background:#000;
position:relative;
margin:1em;
}
.bordertest:first-child:before {
content:'';
position:absolute;
width:100%;
height:30px;
background:linear-gradient(to left, #c4268c, #9a0b72);
top:-30px;
left:0;
}
http://jsfiddle.net/aKhjk/1/ - jsfiddle.net/aKhjk/3
Problem
I would like to put a gradient border at the top of a div. So the start color should be #c4268c and ends with #9a0b72 ``` <div class="bordertest"></div> ``` For easing here is the fiddle :http://jsfiddle.net/aKhjk/ I searched but could not find a suitable way.