CSS3 rounded corner with google map

It worked for me as I added the z-index property:

#map {
    ...
    -webkit-border-radius:20px;
    z-index:0;
}

You have to style the div within the map element, not the map element.

map > div {
    border-radius: 10px;
}

I currently had the same problem with Safari and Chrome. I had to put translate3d to zero for Chrome and add a webkit-mask-image for Safari:

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);

Related