css - Transparent rounded corners on Google Map

Question

I need to make my google map V3 a full circle. I use CSS3 border radius on it, but it works correctly in Firfox only, others just leave it rectangular. Here are the codes:

<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
        <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
            ...
        </div>
    </div>
</div>

and CSS:

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

Yes, I know, I could use some overlay images with background color. But the real problem is that background is not only-color. It changes based on its content, and usually is a gradient. Is there a way to make Chrome and other wabkit-based browsers and Opera (I don't have any hopes about IE) to render it same way as FF does?

My site. Look to the very bottom of the page.

UPD: just tested in IE9, and it renders OK. What's wrong with the webkit and Opera?

UPD 2: I used OverZealous's andwer and figured out that it works only in Safari. Chrome assepts PNG masks only, Opera is not webkit at all. Any more ideas are needed

Answer 1

It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative

Also here: CSS3 border-radius clipping issues

I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.

Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/

This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. ;-)