ужно сделать мою карту Google V3 полным кругом. Я использую радиус рамки CSS3, но он работает правильно только в Firfox, другие просто оставляют его прямоугольным. Вот коды:

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

и CSS:

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

Да, я знаю, я мог бы использовать несколько наложенных изображений с цветом фона. Но настоящая проблема в том, что фон не только цветной. Он изменяется в зависимости от его содержания и обычно является градиентом. Есть ли способ заставить Chrome и другие браузеры на основе wabkit и Opera (у меня нет никаких надежд на IE) отображать его так же, как FF?

Мой сайт. Посмотрите на самую нижнюю часть страницы.

UPD: только что протестирован в IE9, и он делает хорошо. Что не так с webkit и Opera?

UPD 2: Я использовал andwer OverZealous и понял, что он работает только в Safari. Chrome собирает только маски PNG, Opera вообще не является webkit. Нужны еще идеи