'Google maps do not have border radius

when we use google maps to display maps can not make round edges

Issue only on chrome

HTML

<div id="mapframe">
    <div id="map"></div>
</div>

CSS

#mapframe {
    margin: 50px;
    width: 290px;
    height: 290px;
    overflow: hidden;
    border: 10px solid #fff;
    border-radius: 200px;
    box-shadow: 0px 0px 1px #555;

}

#map {
    width: 290px;
    height: 320px;
    border-radius: 200px;
}

http://jsfiddle.net/zsVjG/

cssgoogle-mapsgoogle-chrome


Solution 1:[1]

Correct. Border radius CSS styling for an object containing a Google Map v3 is not rendered in Chrome. Other browsers, such as FireFox and Opera, respect the settings. Note that Chrome did not have this issue with Google Maps v2, but since the plug will be pulled on that in May, the point is moot.

Solution 2:[2]

Give iframe parent to display:flex;

and then give iframe to border-radius:15px;

It's work for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Prashant Chouhan

Related Questions