Exchanged colors of opaque border on gradient background

Question

I try to apply an opaque border to a div with a gradient background. However, the result is rather unexpected to me since the top and bottom colors seem to become exchanged.

html:

<div>
    Test
</div>

css:

div {
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

http://jsfiddle.net/dULyt/

Answer 1

Update

Using background-size property set to something bigger than 100% (e.g. 110%)

DEMO

div{
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-size:110%;
}

---

It's not 'exchanging' or anything. The background is simply repeating itself.
You have to add no-repeat to your background property.

DEMO

div {
    background: -moz-linear-gradient(center top , blue, red) no-repeat;
    background: -webkit-linear-gradient(top , blue, red) no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

Answer 2

@Daniel Here what makes it more easier for you to make an opaque border. Using box-shadow property with 0 offset can full-fill your requirement.

here is the code that may help you to get the desired result.

div {
    background: -moz-linear-gradient(center top , blue, red) no-repeat;
    background: -webkit-linear-gradient(top , blue, red) no-repeat;
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3); 
}

<div>
  Test
</div>

Looking forward to your reply brother.