A trick for Safari 4.0.3 table with border-radius and row background color leak.
While working on EmailServiceGuide I have been using the new border-radius property to get rounded corners without a ton of extra markup and images. It won’t work in Internet Explorer, but the idea is that people who run Internet Explorer are probably not that concerned about visuals anyhow.
Unfortunately the border-radius stuff is in development right now, so it doesn’t always work the way you expect it to. In particular I have this table with rounded corners and zebra pattern on the rows. In Safari the background color of the rows breaks through the rounded border of the table, sticking out sharply and concealing part of the table border. Neither overflow:hidden nor background-clip: border help.
What does help is to follow these instructions and make sure that the inner element with a background-color has a matching rounded border.
The sad thing with that is that in the table case you then have to use CSS to select and round off the top left, top right, bottom left and bottom right th or td elements which adds a lot of silly markup.
Here’s a little trick to cut down on that extra markup: make the zebra color on odd rows. Now the 0 row will have the table’s background color – which does get properly clipped to the table borders – and you know that the only possible place there could be trouble is if if the last row happens to be odd. So you can apply the rounded borders to the corner elements of the last row only and don’t have to do the first row!
Saves you several lines of CSS. : )
