CSS3 rounded corner with google map

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#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; 
}
</style>
<div id="wrapper">
  <div id="map" ></div>
</div>
<script type="text/javascript">
    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 < 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]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

Solution

As much as we want to, we currently can't.

The alternative is overlaying rounded corner cut-outs over each of the corners, to make it look like the corners are rounded. Basically create a rounded square, invert it so it becomes a cut-out shape, split into 4 corner pieces, position each corner inside a parent container.

Example

.container { width: 400px; height: 300px; position: relative; }
.map { width: 100%; height: 100%; }
.corner { width: 30px; height: 30px; position: absolute; background-image: url(my/corners.png) }
.corner.topleft { top: 0; left: 0; background-position: 0 0; }
.corner.topright, etc.