CSS linear-gradient with semi-transparent borders

I'm using linear-gradients with semi-transparent borders for creating modules and buttons etc. Using (for example) rgba(0,0,0,0.1) as the border colour is convenient, because I can set any background colour on my elements without having to worry about the border colour again.

However I've noticed a very odd effect - when combined with a linear-gradient background, browsers use the height of the element's padding box to calculate the height of the gradient, which means it repeats over the top and bottom margins, creating a very odd effect:

Here is the CSS that generates the "Actual" box:

.box {
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border: 25px solid rgba(0,0,0,0.1);
    background-color: #eee;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); 
    margin-bottom: 20px;
}

Now I've already found a workaround that allows me to achieve the desired effect, by forcing the background-size to be 100% + the border size. This is what generated the "Desired" box (.box2):

.box2 {
    background-position: 0 center;
    background-size: auto calc(100% + 50px);
}

However that seems a bit hacky.

So my question is: Can anyone explain why this is - I can't find it documented anywhere, and does anyone have a neater solution?

Here's the JS Fiddle that I used to create the examples, and it also includes a box with an actual image background for comparison: http://jsfiddle.net/29rgksgx/4/