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:

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. ;-)