Google Maps rounded corners

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
amh1010
Forum Newbie
Posts: 19
Joined: Sat Feb 06, 2010 1:49 pm

Google Maps rounded corners

Post by amh1010 »

I have boxes with rounded, transparent corners on my site. Right now I have en embedded map sitting inside one of these rounded boxes, but I want to map to be its own box. I can't simply put an image over the corners of the map since I need the corners to be transparent to accommodate the gradient background. Any ideas?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Google Maps rounded corners

Post by Christopher »

Either float a div with the corners over a div with the map, or make the map the background image.
(#10850)
geoffmuskett
Forum Newbie
Posts: 22
Joined: Sat Feb 27, 2010 3:09 pm

Re: Google Maps rounded corners

Post by geoffmuskett »

might be able to use CSS3 rounded corners if you don't mind that older browsers won't support it...

Code: Select all

#div {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}
amh1010
Forum Newbie
Posts: 19
Joined: Sat Feb 06, 2010 1:49 pm

Re: Google Maps rounded corners

Post by amh1010 »

I'm not sure how making the map the background image would help. I'd still have to layer it over the gradient background, leaving me with the same issue.

Is it possible to round the map's corners in Javascript?
Post Reply