Inner border with radius on google maps element

This is the only way I have found so far to be able to have a usable google maps element with a inner border and border radius. This could be achieved using less extra markups though, but it wouldn't be suitable for high radius values.

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div class="wrapper">
    <div class="map" id="map"></div>
    
</div>

SCSS

#map {
  width: 700px;
  height: 400px;
  .gmnoprint {
    display: none;
  }
}

JavaScript

var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    disableDefaultUI: true,
    zoomControl: true,
    center: new google.maps.LatLng(10.9934, 76.94325),
    mapTypeId: "roadmap"
});

var ctaLayer = new google.maps.KmlLayer({
		              url: 'https://dl.dropboxusercontent.com/u/3133731/kml/bihar.kml', 
		              map:map,
		              preserveViewport: true,
		              suppressInfoWindows: true
		            });