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 javierquiros

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

$radius: 20px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: red;

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
  margin: 50px;
  border-radius: $radius;
}

#map {
  width: inherit;
  height: inherit;
  .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"
});