Weird gradient border effect

Question

When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect.

Answer 1

If you don't want to use box-shadow, you could use border-image and adjust the colors of the gradient: http://jsfiddle.net/9pcuj8bw/5/

.colors {
    width:100px;
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5) no-repeat;
    border: 10px solid;
    border-image: linear-gradient(to right, 
        #0bc3b8,
        #068e8c,
        #f8c617,
        #ea5f24,
        #b2492c) 1;
}

Careful this works not on IE10 or lower: http://caniuse.com/#feat=border-image