I think I'm a fairly typical developer in that doing front end work is something I'm not very good at and simply have to put up with. That being the true I normally wouldn't bother blogging about it. But in this case I came across an odd problem which confused my tiny brain, so I thought it worth writing some guff about. 

My problem was this: I wanted rounded corners on my table and an alternating colour for each row. I did it using this CSS:

.myTable tbody tr:nth-child(2n) td, tbody tr.even td {
  background: none repeat scroll 0 0 #eaeaea;
}

.myTable {
  border: 1px solid black;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

The result is shown below. This happened on both bottom corners, but only when a background was applied (i.e. an even row):

If you can't see that, my rounded corner is missing a few pixels. What the hell is going on? The rounded corners were perfect when there was no background colour. After a fair amount of messing about in Firebug I came to the conclusion that the background colour was somehow conflicting with the rounded corners. My solution/hack was to add some CSS to specifically set the rounded corners of the at the bottom of the table. Why only the bottom corners? Because I have defined a background colour on even rows only and the top row will obviously always be odd.

.myTable tr:last-child td:last-child {
  -moz-border-radius: 0 0 4px 0;
  -webkit-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;
}
.myTable tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 4px;
  -webkit-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
}