Necesito hacer que mi google map V3 sea un círculo completo. Utilizo el radio de borde CSS3 en él, pero funciona correctamente solo en Firfox, otros simplemente lo dejan rectangular. Aquí están los códigos:

<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>

y CSS:

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

Sí, lo sé, podría usar algunas imágenes superpuestas con color de fondo. Pero el verdadero problema es que el fondo no es solo color. Cambia según su contenido, y generalmente es un gradiente. ¿Hay alguna manera de hacer que Chrome y otros navegadores basados en wabkit y Opera (no tengo ninguna esperanza sobre IE) lo representen de la misma manera que FF?

Mi sitio. Mire al final de la página.

UPD: acaba de probar en IE9, y se muestra bien. ¿Qué tiene de malo el webkit y Opera?

UPD 2: Utilicé la torre de OverZealous y descubrí que solo funciona en Safari. Chrome solo crea máscaras PNG, Opera no es un kit web en absoluto. Se necesitan más ideas