Border-radius doesn't affect inner elements

I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a `div` element that contains my header content, a `div` that contains the main content of the page, and a `div` that contains the footer. My problem is this: Since the border of my "header" `div` is not rounded, the large "container" `div` seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" `div` superimposing itself over the "container" `div`. I have an example here: http://jsfiddle.net/V98h7/. I have tried rounding the border of the "header" `div` to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" `div`'s background color). Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything. I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.