I've stumbled upon something weird. When applying a dashed white border to an element, the colors of the background gradient appear on the wrong side of the element, like so:
I've seen this in the latest versions of Firefox, Chrome, Opera and in IE10. IE9 has my intented effect, however.
My css is 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 color fine, but since this happens in pretty much every browser, I'll have to assume this is my mistake, not a browser bug. What am I missing here?