CSS3: Transparent Rounded Corner Problem.

Question

Site is located here: CLICK TO VIEW THE WEBSITE

Here is an image of the problem:

As you can see, using CSS3 border-radius, and background: transparent I was able to make what looks like a "cutout" from the div. The problem should be obvious that the corners are transparent as well.

I know I could just use an image and problem would be solved, but I want to use CSS3. I think there is probably some ingenious way to get around this problem, but I am not thinking of it. I do want to note that I am using css3pie.com to allow IE6 through IE8 CSS3 functionality.

Answer 1

This worked for me in the developer toolbar in Chrome...

On div.middle_bg set the height to 85px. Then set the background on the p tag inside it.

Answer 2

This is a bit hacky

This rules apply to the p tag

-webkit-box-shadow: #A3AFC6 0px -4px 0px 3px;