Border-radius on mapbox in safari

Question

I am using this angular directive for mapbox (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map) and trying to get the border-radius to be 10px which works perfectly in Chrome and Firefox but on Safari it isn't working.

This is the CSS I am using (For some reason it only works with opacity: .99 on chrome/firefox)

.angular-mapbox-map{
    opacity: .99;
    border-radius: 10px;
}

Does anybody know what is going on or how to resolve this. You can play with the mapbox element in the link above using chrome dev tools or the equivalent.

Answer 1

I found a solution here How to make CSS3 rounded corners hide overflow in Chrome/Opera using:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);