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

<style type="text/css">
    .test 
    { 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        border: #a9a9a9 1px solid; .
        width: 200px; 
        height: 50px; 
    }
</style>
<table class='test'>
    <tr>
        <td>
           this is a test
        </td>
    </tr>
</table>

This works for me in Chrome and FF.

Answer 2

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.

Answer 3

I got it to work without a table, using div, with :

display: table-cell;
vertical-align: middle;