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

The background is repeating itself under the border. The background runs only in the "body" of the element, under the border is an expansion and repeat starts occurring.

See this example with no-repeat on the border.

UPDATE

Playing with background position & size can help by expanding the background and then adjusting it's location.

Check this fiddle out.

Or see snippet:

.colors {
  padding: 10px;
  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);
  background-size: 117%;
  background-position-x: 130px;
}