title: Transparent rounded corners on Google Map
body: <p>I need to make my google map V3 a full circle. I use CSS3 border radius on it, but it works correctly in Firfox only, others just leave it rectangular. Here are the codes:</p>
  
  <pre><code>&lt;div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&gt;
      &lt;div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"&gt;
          &lt;div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.map.mapCircle {
      width: 476px;
      height: 476px;
  }
  .mapCircle&gt;div&gt;div:first-child {
      -moz-border-radius: 238px;
      -webkit-border-radius: 238px;
      border-radius: 238px;
  }
  </code></pre>
  
  <p>Yes, I know, I could use some overlay images with background color. But the real problem is that background is not only-color. It changes based on its content, and usually is a gradient. Is there a way to make Chrome and other wabkit-based browsers and Opera (I don't have any hopes about IE) to render it same way as FF does? </p>
  
  <p><a href="http://xn--80agcehhdd1an9n.xn--p1ai/" rel="nofollow">My site. Look to the very bottom of the page.</a></p>
  
  <p><strong>UPD:</strong> just tested in IE9, and it renders OK. What's wrong with the webkit and Opera?</p>
  
  <p><strong>UPD 2:</strong> I used OverZealous's andwer and figured out that it works only in Safari. Chrome assepts PNG masks only, Opera is not webkit at all. Any more ideas are needed</p>