Can I make a table line with rounded corners?

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-b开发者_高级运维order-radius: 5px;

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.

Lesson in Table Borders...

NOTE: The HTML/CSS code below should be viewed in IE only. The code will not be rendered correctly in Chrome!

We need to remember that:

1. A table has a border: its outer boundary (which can also have a border-radius.)

2. The cells themselves ALSO have borders (which too, can also have a border-radius.)

3. The table and cell borders can interfere with each other:

   The cell border can pierce through the table border (ie: table boundary).

   To see this effect, amend the CSS style rules in the code below as follows:
   i. table {border-collapse: separate;}
   ii. Delete the style rules which round the corner cells of the table.
   iii. Then play with border-spacing so you can see the interference.

4. However, the table border and cell borders can be COLLAPSED (using: border-collapse: collapse;).

5. When they are collapsed, the cell and table borders interfere in a different way:

   i. If the table border is rounded but cell borders remain square, then the cell's shape takes precedence and the table loses its curved corners.

   ii. Conversely, if the corner cell's are curved but the table boundary is square, then you will see an ugly square corner bordering the curvature of the corner cells.

6. Given that cell's attribute takes precedence, the way to round the table's four corner's then, is by:

   i. Collapsing borders on the table (using: border-collapse: collapse;).

   ii. Setting your desired curvature on the corner cells of the table.
   iii. It does not matter if the table's corner's are rounded (ie: Its border-radius can be zero).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

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

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

tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}

<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.