Why are border boundaries inverted when applying a background gradient?

Question

I stumbled upon something strange. When a dotted white border is applied to an element, the colors of the background gradient are displayed on the wrong side of the element, for example:

I have seen this in the latest versions of Firefox, Chrome, Opera, and IE10. However, IE9 has my intended effect.

My css currently:

aside.block { width: 259px; padding: 12px; margin: 15px 0; border: 2px dashed #fff; background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00'); } 

The border colors on the left and right side of the color are beautiful, but since this happens in almost all browsers, I have to assume that this is my mistake, and not a browser error. What am I missing here?

Answer 1

You can fix this by setting background-origin to border-box .

http://jsfiddle.net/LVfqe/11/

 .block{ width: 259px; padding: 12px; background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00'); border: 2px dashed #fff; background-origin:border-box; }