title: Safari breaks border radius using Google maps in a div
body: <p>First question on Stack for me
  I've done my homework and found something like this topic </p>
  
  <p><a href="https://stackoverflow.com/questions/15368627/in-webkit-browsers-v3-google-maps-do-not-respect-containers-border-radius-any">In webkit browsers, v3 google maps do not respect container&#39;s border-radius. Anyone have a workaround?</a></p>
  
  <p>but still I see the issue..so here I am. I'm embedding google maps in one project of mine and want to clip it in a circle shaped frame. </p>
  
  <p>While the solution I used works great on chrome and Firefox I just discovered doing some test that Safari does not render border radius on a "clipping" container, allowing the underneath google map content to overlap the rounded corners.</p>
  
  <p>The odd thing is that this behaviour does apply only on Safari. While on chrome it works pretty fine..</p>
  
  <p>You can check it out your self opening this fiddle in safari and chrome and you will immediately spot the difference (mind the corners)</p>
  
  <p><a href="http://jsfiddle.net/wmcmeans/YHX6c/" rel="nofollow noreferrer">http://jsfiddle.net/wmcmeans/YHX6c/</a></p>
  
  <p>The fiddle from MAC is pretty evident: just try into different browser. </p>
  
  <p>Here is the code structure used in the fiddle that mirrors the one I used in my project</p>
  
  <pre><code>&lt;div id="map1" class="clip"&gt;
  &lt;!--MAP GOES HERE---&gt;
  &lt;/div&gt;
  
  
  
  .clip {
          overflow: hidden;
          border-radius: 20px;
          box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
          border: 1px solid red;
      }
  </code></pre>
  
  <p>NOTE: The clipping effect with border radius works on Safari Version 7.0.3  if inside the .clip div we have a static image as a background</p>
  
  <p>Hope someone has some simple workaround :) </p>
  
  <p>thanks and Ciao</p>