Border radius property breaks on table footer

Border radius property breaks on table footer

I apologize ahead of time if this is a silly question, since it seems like
something that probably come up a lot, but I haven't been able to find
anything that references this problem.
Basically all I'm trying to do is make a table with rounded corners with
both a header and a footer with different colors than the main table.
Ideally, the header and footer would both inherit from the parent table,
but being able to separately round the footer/header would be fine for my
purposes.
The current issue is highlighted here: http://jsfiddle.net/VfVx9/
tfoot{
background: #ff0000;
border-radius: 20px;
}
In my mind directly giving the footer a border radius should round the
corners, but that doesn't quite seem to be working. Any ideas?
Again, sorry if this is a silly question, I'm pretty new to front-end
development.