Double border CSS3 - FF !Chrome

Question

I'm wondering, why this double border on table TDs won't show in Chrome but only in FF? Any ideas what could be the work around? Thanks!

http://jsfiddle.net/yQQLk/1/

Answer 1

Not sure why you're using box-shadow to produce a double border, when the border property itself already supports a double border on its own. Just use the following CSS instead of what you've got:

td {
    border-bottom: 3px double red;
}

Note you'll need to increase the size of the border to 3px so that both of the lines show up (with 1px, it sometimes doesn't show up at all when you specify double).

The other advantage is that this will work in all browsers, including older ones which don't support box-shadow.

Answer 2

Increase your border thickness to to see a more obvious demonstration of the rendering differences between the two browsers. It seems that in FF, the box-shadow is overlaid on top of the border, in Chrome it hides underneath.

You could use another approach - perhaps use a border-bottom combined with a text-decoration: underline.