Reputation: 69
I have a page with a google maps in it, now I'm trying to make a border radius on it. This is working in browsers like Chrome and Firefox but not working on safari.
You can find the page here: clients.steven-dejong.nl/amano/#contact
EDIT: It's working with the address block and if I add -webkit-border-radius and -moz-border-radius it makes no sense.
The only part where my border radius isn't working is the google maps container
Upvotes: 1
Views: 6594
Reputation: 228
Border Radius to Google Map in Safari
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-transform: translateZ(0);
Use this snippet to both the map iframe and its parent div
Upvotes: 5
Reputation: 963
To make it work in all browsers:
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
Upvotes: 0
Reputation: 4686
Use the -webkit prefix and do something like below:
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px; /* Adjust as needed */
Upvotes: 0