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 gradient starts within the padding box according to the default CSS box model behaviour, so it makes sense that the very start and very end colours appear until infinity either side of the gradient, where the border would be.

The same is true of this gradient (NSFW):

It continues infinitely in the starting value (violet) to the left, and continues infinitely with the end value (orange) to the right. It can continue infinitely upwards with this gradient, and so it does.

That's my understanding of why this is appearing so, a solution would to use a different box model.