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.

by amenadiel

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>
    <i class="top"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <i class="left"></i>
    <i class="top left"></i>
    <i class="top right"></i>
    <i class="bottom left"></i>
    <i class="bottom right"></i>
</div>

SCSS

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

JavaScript

new google.maps.Map(document.getElementById("map"), {
    zoom: 1,
    disableDefaultUI: true,
    zoomControl: true,
    center: new google.maps.LatLng(28, -41),
    mapTypeId: "roadmap"
});