13

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

doremi
  • 14,025
  • 26
  • 88
  • 139
  • it's a fairly common problem when you set the background on a different element to the rounded corners. – Spudley Jan 13 '11 at 17:22

3 Answers3

15

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.

Chowlett
  • 44,716
  • 18
  • 112
  • 146
  • This solution works for all browsers except IE. I only tried it in IE9, where the gradient fill seems to "flow over" the borders. (Or am I missing something?) See: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding –  Jul 12 '11 at 07:35
  • this solution is not good if the container has overflow:visible and it's scrollable, and i'm facing that problem RIGHT NOW... – vsync Feb 23 '12 at 17:05
2

overflow:hidden; does not work

but this does:

h2
{
  position:relative;  
  z-index:-1;
....
}
Thorgeir
  • 3,257
  • 3
  • 21
  • 19
1

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

Stuart Burrows
  • 10,814
  • 2
  • 32
  • 33