Is this a bug with CSS3: Rounded corners with CSS3 gradient

Question

I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.

If not, how do I fix this?

Source & Demo here: http://jsfiddle.net/joshuamcginnis/2aJ8X/

Screenshot:

Answer 1

The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.

Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.

Answer 2

overflow:hidden; does not work

but this does:

h2
{
  position:relative;  
  z-index:-1;
....
}