CSS borders style INSET or GROOVE look very different from IE9 FF4 or Safari5 or Chrome2

Question

Sorry for being a nitwit, but I am getting some really, very big different outcomes visually from the various browsers when trying to get a certain groove effect or inset effect as border style.

when using

{
    border: 5px groove #A00;
}

or

{
    border: 5px inset #A00;
}

The Firefox 3.6/4.0 look is the one that is what I need and what I think is a correct GROOVE or INSET rendering. All the others look awfully different. Close to SOLID or OUTSET. Apparently there is no real precise definition, which kind of makes it a surprising party for the developers at the browsers to give each their own interpretation of what INSET and GROOVE styling does.

Is there any way I could get the currently ridiculous differences to match up towards one well thought design of mine that might look the same way in the major browsers?

I am not afraid of using some other creative CSS3 stuff if I only know what or how that could be used then. So any ideas are welcome and code especially too.

Answer 1

From the spec (emphasis mine):

The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

Therefore there is no "correct" way of coloring the borders. It's up to the browser vendor how they want their browser to shade the borders.

So, in answer to this:

Is there any way I could get the currently ridiculous differences to match up towards one well thought design of mine that might look the same way in the major browsers?

I guess you could nest elements and play with multiple borders' border-color settings yourself if you need fine-grained control. Make these borders solid, though, for starters.

Answer 2

Firefox/Webkit/IE/Opera all look consistent to me in terms of the pattern they render - that is, a darker color on the outside of border-left and border-top, and a lighter color on the outside of border-right and border-bottom.

The actual colors do seem to differ per browser though. From your example:

Opera
Darker: #7f0000; rgb(127,0,0)
Lighter: #c04141; rgb(192,65,65)

Firefox
Darker: #770000; rgb(119,0,0)
Lighter: #d47f7f; rgb(212,127,127)

Webkit
Darker: #560000; rgb(86,0,0)
Lighter: #aa0000; rgb(170,0,0)

IE8
Darker: #2e0303; rgb(46,3,3)
Lighter: #b80d0c; rgb(184,13,12)

The color ratios are clear and the Webkit one seems to be the only logical one - the specified color for the lighter one, and double the RGB value for the darker one.

The others are quite different, but the pattern is at least the same.