Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Table borders - outset and ridge

Cross-browser differences

3:29 am on Jul 13, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 520

Not a question, more of an fyi.

At the very end of this thread [webmasterworld.com], there was some topic drift into the realm of border colors. I went off to investigate and forgot to post the results until now. Useful (if infuriating!) to know.

The question was: how do different browsers treat "ridge" and "outset" borders (and correspondingly "groove" and "inset"), where the CSS specifies a single "border-color" and it's up to the browser to split it into multiple colors to achieve the raising/lowering effect?

I've stuck the css and html onto the bottom of this post. I tried it first on the five browsers on my mac, and then went out and asked some other random people with random computers (notably of course MSIE on That Other Platform) to try it and send screenshots.

I tried three different colors-- red, grey, green-- and both "ridge" and "outset". This turned out to be superfluous because everyone reduced it to one light color and one dark color... except MSIE, which saw fit to interpret "outset" as "groove" and yield a total of four colors. (It also chose to read "border-spacing: 8px;" as "border-spacing: 2px;" though this pales by comparison with Chrome's decision to interpret "float: left" as "float: right".)

In brief: Apple WebKit browsers (Safari, Chrome, text editor's www preview) used the given color as-is for "light", and made a darker version for "dark".

The others on my Mac go lighter than the given color for "light" and darker for "dark"-- but they're strikingly different in effect.

Mozilla browsers (Firefox and Camino) go much lighter for the "light" side and much darker for the "dark" side.

Opera keeps a much smaller difference between "light" and "dark".

Now the plot thickens. For the "ridge" border, MSIE uses only two colors-- but they're both darker than the given color. For the border that's supposed to be "outset", MSIE renders it as "groove"-- and ends up with four different colors. That is, the "light" and "dark" sectors each get their own calculations instead of using each other's values. The lightest of the four is approximately the named color; the other three go progressively darker. (I say "approximately" because the screen shots I got were jpg, which doesn't do well with abrupt changes of color. I didn't think to ask for png.)

with border-color set to #999 (153/153/153, medium grey)

Apple WebKit switches between 153 (all three) and 69
Mozilla has 220 and 89
Opera has 204 and 76
MSIE has 114 and 76
(the four-way version is: 153 and 114 on the "light" sides; 76 and 38 on the "dark" sides)

Oh, and there was also a good bit of variation in the exact horizontal and vertical positioning. File under nagvaaqtara.

Moral: A man with a clock knows what time it is. A man with two clocks is never sure.

** the code I used for testing **


body {margin-left: 10%; margin-right: 10%; background-color: #CCC;}

table {border-spacing: 8px; background-color: white;}
td {padding: 1.5em; border: 1px solid black;}

table.ridge {border-width: 16px; border-style: ridge; margin: 1em auto;}
table.outset {border-width: 8px; border-style: outset; margin: 1em auto;}

table.red {border-color: #F00; float: left; clear: left;}
table.grey {border-color: #999; margin: 2em auto;}
table.green {border-color: #090; float: right; clear: right;}


<table class = "ridge red">

<table class = "ridge green">

<table class = "ridge grey">

<table class = "outset red">

<table class = "outset green">

<table class = "outset grey">
9:16 am on July 13, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4

Interesting results thanks :) although not totally unexpected as the specs don't define the colours to be used in these situations so its left to the browsers to decide - hence the variations.

Nice to have the differences documented though so thanks for the detailed post.

I must admit I have always avoided using ridge, groove, double, outset simply for the reasons you mentioned above because they are so inconsistent between browsers especially where they need to fit into an existing colour scheme.
9:25 pm on Dec 2, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2003
posts: 1199
votes: 0

Fantastic investigation. Saved us all lots of hard work.

Of course, the sad conclusion is that if we use outset borders then our visitors are going to see different things depending on what browser they use. Hard to believe it's 2011. Some things never change.