In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

Question

I have two google maps. The first is created using the Google Maps API (v3) and contained in #map1. The second is displayed in an iframe using the suggested embed syntax fro

Answer 1

Here is the solution : http://jsfiddle.net/alxscms/3Kv99/

I am using several extra markups to achieve this, which I don't like so much but was the only possible way to me.

My goal was to have a inner border and rounded corners, but you can set the border thickness to 0 and you will have just the rounded corners on the map. This works on FF, Chrome and IE. I haven't tested on Opera or Safari.