CODEWITHSUNDEEP
csscolorsbordergradient
Lg102
Lg102

Reputation: 4908

Why are border colors inverted when a background gradient is applied?

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:

wrong border colors

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?

Upvotes: 12

Views: 2771

Answers (1)

easwee
easwee

Reputation: 15915

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;
}

Upvotes: 10

Related Questions