How do I crop internal HTML elements at CSS3 rounded borders?

I have a div inside another div. The outer div has rounded borders using CSS3. The problem is, if I set a background color on the inner div it bleeds through开发者_运维技巧 into the corners. Here's a test page to show what I mean: http://www.webdevout.net/test?0O

I suspect it's not a renderer issue, as the same thing happens in Chrome, FF, and Opera. How do I get the inner div to crop at the rounded borders? Setting border-radius on the inner div to inherit doesn't cut it, the borders don't match up.

EDIT: The inner div is actually a header for more content inside the outer div, so applying the rounded borders to the inner div instead will not work.

Can you set the rounded corners on your inner div and just use your outer div as the container (unless it's no longer needed, then just get rid of it to remove the unnecessary nesting).

See this example: http://www.webdevout.net/test?0Q

I added padding to your inner div and applied all of your CSS classes to the inner div.

overflow:hidden should do it... Or actually, it doesn't... give another set of rounded corners to the inside container.

You can't. Those areas are occupied by the border of the element and that can't be changed. That's not to say you can't without extra markup and css to pull it off but, normally, no.

Round your top corners on the inner div but don't round the bottom corners, like so:

http://www.webdevout.net/test?0T