CODEWITHSUNDEEP
csssafari
Steven de Jong
Steven de Jong

Reputation: 69

Border Radius not working in safari

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

enter image description here

Upvotes: 1

Views: 6594

Answers (3)

Kamal Kumar
Kamal Kumar

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

Stan
Stan

Reputation: 963

To make it work in all browsers:

border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;

Upvotes: 0

Sleek Geek
Sleek Geek

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

Related Questions