title: CSS3 rounded corner with google map
body: <p>I am trying to apply rounded border using with css3 border-radius property in Google map but its not work in chrome, in other browser its work great. 
  Any ideas or suggestions? Here i am putting my code and waiting positive reply.
  Thanks </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Google Maps Testing&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style type="text/css" &gt;
  #map {
      position: absolute; 
      top: 120px; 
      left: 0; 
      right: 0; 
      bottom:0; 
      z-index: 1; 
      overflow: hidden;
      border:solid 3px #00FF33; 
      border-radius:15px; 
      width: 500px; 
      height: 200px; 
      margin:0 auto;  
      -moz-border-radius:15px;
      -webkit-mask-border-radius:15px;
      -webkit-border-radius:15px;
  }
  #wrapper {
          position:absolute; 
  }
  &lt;/style&gt;
  &lt;div id="wrapper"&gt;
    &lt;div id="map" &gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
  
    var infowindow = new google.maps.InfoWindow();
      var i,marker;
      for (i = 0; i &lt; locations.length; i++) {  
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: 'marker_icon.png',
          borderRadius: 20,
          animation: google.maps.Animation.DROP
        });
  
        google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]+' &lt;img src="map-pin.png" /&gt; &lt;div style="background:#090;height:100px;width:200px;"&gt;yeah its working perfect ..!!!&lt;/div&gt;&lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;form&gt;&lt;a href="javascript: alert(\'foo!\');"&gt;Click Me&lt;/a&gt;&lt;/form&gt;');
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>