CODEWITHSUNDEEP
htmlgradientcss
doremi
doremi

Reputation: 15339

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

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:

alt text

Upvotes: 13

Views: 1490

Answers (3)

Thorgeir
Thorgeir

Reputation: 4443

overflow:hidden; does not work

but this does:

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

Upvotes: 2

Chowlett
Chowlett

Reputation: 46675

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.

Upvotes: 15

Stuart Burrows
Stuart Burrows

Reputation: 10814

It's not specific to background gradients. It's just the background of the h2 element overlapping sitting on top of the rounded corners. I'm not sure it's a bug in the strictest sense, but it is fairly well known. Easiest 'fix' is rounding the corners of the element with the background. Example: just setup for chrome

Upvotes: 1

Related Questions