Can I make a table line with rounded corners?

Question

I've been using HTML and CSS to style my resume, but I'm having difficulties styling a <tr> element.

Does this not work inside a table ?

-moz-border-radius: 5x;
-webkit-border-radius: 5px;

Answer 1

Yes, it works inside a table on td and th elements, but not on tr. You can also use it on table to round the corners of the whole table.

If you want to round a row of cells so that the left- and rightmost elements are rounded, you need to use the :first-child and :last-child pseudo classes:

tr td:first-child {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

tr td:last-child {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

first-child is not supported by IE6, and while IE7 adds support for it, it still lacks last-child. But that doesn't matter in your case as border-radius wouldn't work in those browsers anyway.