1

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/

Kara
  • 6,115
  • 16
  • 50
  • 57
Nicolas Danelon
  • 45
  • 2
  • 7
  • Similar: http://stackoverflow.com/questions/15368627/in-webkit-browsers-v3-google-maps-do-not-respect-containers-border-radius-any – Alex L May 23 '13 at 03:09

2 Answers2

2

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.

0

Give iframe parent to display:flex;

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

It's work for me

Prashant Chouhan
  • 51
  • 8