iframe上的边界半径不适用于MAC（Safari）

Question

I am facing css problem. Border radius on is not working on mac book (Safari).. when i try on widows its working well..

Here is my html

   <div class="map">
       <div class="map-border">    
          <iframe width="295" height="295" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3160.515465008442!2d-122.40503609999998!3d37.6135611!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f77776e3c0101%3A0x78bd162ebe8e8904!2s1699+El+Camino+Real+%23201!5e0!3m2!1sen!2s!4v1403695117548">

        </iframe>
   </div>

Here is my css code.

        .map {
width: 315px;
height: 315px;
overflow: hidden;
position: relative;
border: 10px rgba(0, 0, 0, 0.1) solid;
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in; 
z-index: 10;
}
.map .map-border {
  position: absolute;
  overflow: hidden;
  height: 295px;
  border: 10px white solid;
  -webkit-border-radius: 190px;
  -moz-border-radius: 190px;
  -ms-border-radius: 190px;
  -o-border-radius: 190px;
  border-radius: 190px; 
  overflow: hidden;
  z-index: -10;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  }

 iframe {
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
border: 0; 
display: block;
}

Here is the live code. http://jsfiddle.net/adnan00733/ju9zL9um/ Note : On windows it will look well. But unfortunately its not working on MAC..

PLEASE HELP. Thanks in advance.

Answer 1

Ok the best solution I could come up with is:

1. Putting an image on the top of your map. In this case you probably can't access your map.

2. Putting four images ie one on each side of your map. Not the most beautiful solution, but as long as it works...))

(I can cut the image into pieces for you if you want)