Border-Radius Conflict

Get Started
1

Hi,

I’m trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing.

The HTML is:


<tr>
	<td width="12%" class="tbl-col cnr-tl">Col 1</td>
	<td width="20%" class="tbl-col">Col 2</td>
	<td width="20%" class="tbl-col">Col 3</td>
	<td width="30%" class="tbl-col">Col 4</td>
	<td width="12%" class="tbl-col cnr-tr">Col 5</td>
</tr>

and the css is:


.tbl-col {
	background-color			: #FFDA99;
	color						: #C00000;
	font-size					: 15px;
	font-style					: italic;
	font-weight					: bold;
	height						: 25px;
	text-align					: center;
}
.cnr-tl {
	border-top-left-radius				: 10px;
	-moz-border-radius-topleft			: 10px;
	-webkit-border-top-left-radius		: 10px;
}
.cnr-tr {
	border-top-right-radius				: 10px;
	-moz-border-radius-topright			: 10px;
	-webkit-border-top-right-radius		: 10px;
}

When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can’t get both end columns to have rounded corners at the same time.

Putting both corner styles on one column does work, though, but I’d like to have both end columns to have rounded corners and the middle columns to have straight corners.

Does anyone know how to do this?

Debbie

2

What browser are you looking at? Your code works OK in Firefox.

Try to avoid all those classes, though. Instead of having the .tbl-col class on each cell, you could remove them and simply do this in the CSS:

td {
	background-color			: #FFDA99;
	color						: #C00000;
	font-size					: 15px;
	font-style					: italic;
	font-weight					: bold;
	height						: 25px;
	text-align					: center;
}
3

Firefox 4.

4

Which platform? Works fine in FF4 (Win) for me. Haven’t tried Mac yet.

5