CSS INSET or GROOVE border style is very different from IE9 FF4 or Safari5 or Chrome2

Question

Sorry to nitwit you, but I get visual visual effects from various browsers when I try to get a specific groove effect or insert effect as border style.

using

{ border: 5px groove #A00; } 

or

 { border: 5px inset #A00; } 

The look of Firefox 3.6 / 4.0 is the one I need, and I think this is the correct rendering of GROOVE or INSET. Everyone else looks terribly different. Close to SOLID or OUTSET. There seems to be no real precise definition, which makes it an amazing batch for developers in browsers to give everyone their own interpretation of what the INSET and GROOVE style does.

Is there any way I could get ridiculous differences at the moment to fit in with one well-thought-out design of mine that might look the same in major browsers?

I'm not afraid to use some other CSS3 creative stuff if I only know what and how to use it. Therefore, any ideas are welcome and especially for the code.

Answer 1

Firefox / Webkit / IE / Opera look consistent with me in terms of the template they display, i.e. darker color on the outer side of the border - on the left and on the border, and a lighter color on the outer border of the border -right and border-bottom.

Actual colors seem to vary for each browser. In 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 (212127127)

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)

Color factors are understandable, and Webkit seems to be the only logical one - the specified color for lighter and double the RGB value for darker.

The rest are completely different, but the template is at least the same.

Answer 2

From spec (highlighted by me):

The color of the borders drawn for the values ​​of “groove”, “comb”, “insert” and “start” depends on the color properties of the border of the element , but UA can choose their own algorithm for calculating the actual colors used . For example, if “border-color” is “silver,” then UA can use a gradient of colors from white to dark gray to indicate an oblique border.

Therefore, there is no “right” way to color borders. It depends on the browser provider, how they want their browser to obscure the borders.

So, in response to this:

Is there any way I could get ridiculous differences at the moment to fit in with one well-thought-out design of mine that might look the same in major browsers?

I think you could embed the elements and play with the settings of several border-color borders yourself if you need a fine-grained control. Make these borders solid, however, for starters.

Answer 3

I know you already accepted the answer, but consider using the "outline" property.

Already discussed here on SO