CSS RGBA border / background alpha double

Question

I\'m working on a website that has a lot of transparency involved, and I thought I would try to build it entirely in RGBA and then do fallbacks for IE. I need a \"facebox\"

Answer 1

Testing this in Firefox confirms what you describe - and it took me a little while to realize the implications of this! Having the border less transparent will have no effect on the transparent background beneath it, because the border is (as you say) additive.

In which case, you'll have to simulate the effect you're after and work with the colours more than the alpha:

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

Answer 2

Try this:

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

Answer 3

You can use the new background-clip: padding-box; property to get this going. It calculates where from should the background start within a box. For more details and examples, check here