title: In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
body: <p>I have two google maps. The first is created using the Google Maps API (v3) and contained in #map1. The second is displayed in an iframe using the suggested embed syntax from Google and is contained in #map2.</p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/wmcmeans/mPGWx/7/" rel="nofollow">http://jsfiddle.net/wmcmeans/mPGWx/7/</a></p>
  
  <p>Here are the snippets:</p>
  
  <pre><code>&lt;div id="map1" class="gmap left bling"&gt;&lt;/div&gt;
  
  &lt;iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;amp;q=augsburg+germany&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&amp;amp;t=h&amp;amp;ll=48.451123,10.862346&amp;amp;spn=0.004981,0.00912&amp;amp;z=16&amp;amp;output=embed"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Here's the issue: Google Maps created from the v3 API do not respect the borders of the container having border-radius styling applied, when viewed in a webkit-based browser. The iframed (embed) method does not show the same deficiency.</p>
  
  <p><strong>Tested good:</strong></p>
  
  <p>FireFox v 19.0.2 (Windows 7)</p>
  
  <p>FireFox v 32.0.3 (Windows 8.1)</p>
  
  <p>IE9 v 9.0.8112 (Windows 7)</p>
  
  <p>IE11 (Windows 8.1)</p>
  
  <p><strong>Failed on:</strong></p>
  
  <p>Chrome v 25.0.1364.160 m  / Safari (Win/32) v 5.0.3  / Opera v 11.64 (Windows 7)</p>
  
  <p>Chrome v 38.0.2125.104 m (Windows 8.1)</p>
  
  <p>Version 2 maps are deprecated and not an option. I'd like to style v3 maps with CSS only, no graphics or overlays. I'm looking for a workaround to the webkit rendering issue. (I've already opened a <a href="https://code.google.com/p/chromium/issues/detail?id=187187" rel="nofollow">Chromium Issue #187187</a> for this that, almost a year later, has yet to be looked at).</p>