Question

I need to style a table to have rounded corners.

I’m just looking at how best to go about it:

Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.

The table, however, has internal borders, so I’d have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.

Is this clear so far?

So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.

Can anyone think of a better way?

Answer 1

You better make a background image with just the corners, and not the borders. Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.

And style the borders with css. Don’t put them in the background image.

In your approach, you’ll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.