如何在CSS3圆形边界处裁剪内部HTML元素？

Question

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.

Answer 1

溢出：隐藏应该这样做...或者实际上，它没有...给内部容器添加另一组圆角。

Answer 2

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.

Answer 3

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.

Answer 4

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

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