html - Exchanged colors of opaque border on gradient background -

i try apply opaque border div gradient background. however, result rather unexpected me since top , bottom colors seem 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/

update

using background-size property set bigger 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. background repeating itself.
you have add no-repeat 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); }