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,921
  • 30
  • 93
  • 148
  • 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
  • 45,935
  • 20
  • 116
  • 150
  • 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,960
  • 3
  • 24
  • 20
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,824
  • 2
  • 34
  • 33