Weird effect when applying transparent border over an element with a gradient background

Question

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

Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly flat.

HTML

<div class="colors"> </div> 

CSS

.colors {     width: 100px;     border: 10px solid rgba(0,0,0,0.2);     height: 50px;     background: linear-gradient(to right,          #78C5D6,         #459BA8,         #79C267,         #C5D647,         #F5D63D,         #F08B33,         #E868A2,         #BE61A5); } 

Why is this showing a weird effect on the left and right side of the element, and What can I do about it?

Here is the fiddle: http://jsfiddle.net/fzndodgx/3/

Answer 1

That's because the starting and ending points of the gradient are at the edges of the padding-box and border is rendered outside the padding-box. So, the borders look funny because the background is repeated on each side outside the padding-box to cover the border-box.

The box-shadow:inset is rendered inside the padding-box (just like background) and gives visually the same effect as a border, so you could try using that in place of border:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2); padding: 10px; 

Because a box-shadow doesn't take up any space, you need to increase your padding accordingly.

Illustration of padding-box and border-box:

Demo http://jsfiddle.net/ilpo/fzndodgx/5/