table border-radius

[igordonin]

Ok, what I'd like here is simple: the top row, which is the header, should have rounded borders on the left top and right top corners.

The table has borders to better organize the data, and what happens is that I get both rounded and squared borders, if you look closely.

Any help will be appreciated. Here's what I got so far.

HTML

<div id="Search_Result">
  <table>
    <thead>
      <tr>
        <th>Action</th>
        <th>Field 2</th>
        <th>Field 3</th>
        <th>Field 4</th>
        <th>Field 5</th>
        <th>Field 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Result 1 - Field 1</td>
        <td>Result 1 - Field 2</td>
        <td>Result 1 - Field 3</td>
        <td>Result 1 - Field 4</td>
        <td>Result 1 - Field 5</td>
        <td>Result 1 - Field 6</td>
      </tr>
      <tr>
        <td>Result 2 - Field 1</td>
        <td>Result 2 - Field 2</td>
        <td>Result 2 - Field 3</td>
        <td>Result 2 - Field 4</td>
        <td>Result 2 - Field 5</td>
        <td>Result 2 - Field 6</td>
      </tr>
      <tr>
        <td>Result 3 - Field 1</td>
        <td>Result 3 - Field 2</td>
        <td>Result 3 - Field 3</td>
        <td>Result 3 - Field 4</td>
        <td>Result 3 - Field 5</td>
        <td>Result 3 - Field 6</td>
      </tr>
      <tr>
        <td>Result 4 - Field 1</td>
        <td>Result 4 - Field 2</td>
        <td>Result 4 - Field 3</td>
        <td>Result 4 - Field 4</td>
        <td>Result 4 - Field 5</td>
        <td>Result 4 - Field 6</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

#Search_Result {
	width: 980px; min-width: 980px; max-width: 980px;
	margin: 0 auto; margin-bottom: 10px;
	background-color: #fff;
}	/*
	#Search_Result>div.result { 
		display: block; 
		background-color: #fff; 
		border: 1px solid rgb(200,200,200); border-radius: 0px 0px 5px 5px;
		height: 300px;
	}
	*/
	#Search_Result table { 
		width: 100%; 
		background-color: #fff;
		border-collapse: collapse;
	}	#Search_Result th {
			padding: 10px;
			font-size: 13px; color: #fff;
			border: 1px solid rgb(200,200,200);
			background: rgb(135,135,135); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(91,91,91,1) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,135,135,1)), color-stop(100%,rgba(91,91,91,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* IE10+ */
			background: linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */
		} 	#Search_Result th:first-of-type { border-radius: 5px 0px 0px 0px; }		
			#Search_Result th:last-of-type { border-radius: 0px 5px 0px 0px; }
	#Search_Result td { padding: 2px; border: 1px solid rgb(200,200,200); }
	#Search_Result>table>caption { font-size: 20px; border-bottom: 1px solid #000;; }

Thanks again.

[igordonin]

well, I actually fixed it by not having border-collapse. I hate this fix. If anyone can help me do it in a cleaner way, I'd appreciated.

Here's the fixed and tweaked CSS:

#Search_Result {
	width: 980px; min-width: 980px; max-width: 980px;
	margin: 0 auto; margin-bottom: 10px;
	background-color: #fff;
}	#Search_Result table { 
		width: 100%; 
		background-color: #fff;
		border-collapse: separate;
		border-spacing: 0px;
	}	#Search_Result th {
			padding: 10px;
			font-size: 13px; color: #fff;
			border: 1px solid rgb(200,200,200);
			border-right: 0px;
			background: rgb(135,135,135); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(91,91,91,1) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,135,135,1)), color-stop(100%,rgba(91,91,91,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* IE10+ */
			background: linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */
		} 	#Search_Result th:first-of-type { border-radius: 10px 0px 0px 0px; }		
			#Search_Result th:last-of-type { border-radius: 0px 10px 0px 0px; border-right: 1px solid rgb(200,200,200); }
	#Search_Result td { 
		padding: 2px; 
		border: 1px solid rgb(200,200,200); 
		border-right: 0px;	border-top: 0px;
	}	#Search_Result td:last-of-type { border-right: 1px solid rgb(200,200,200); }