Top border with gradient using css

Question

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.

Answer 1

Now, you can use linear gradients with the border-image attribute in all modern browsers.

.bordertest {
   color: pink;
   border: 10px solid pink;
   border-image: repeating-linear-gradient( 45deg, pink, pink 1%, purple 1%, purple 8%) 10;
}

See: https://css-tricks.com/almanac/properties/b/border-image/