How can I make my Google Map V3 retain rounded corners?

Question

The squared-look approach is very unappealing.

<div id ="container">
    <div id="map_canvas" style="width: 840px; height: 600px"></div>
</div>

There are no styles on #container. I've tried an image based approach but it didn't work, also the thread it referenced was dead. Any suggestions guys?

Presume the space after id property in container tag is a typo in the post not in your code. (Tried editing but need a minimun of 6 changes) — flurdy, Apr 25 '12 at 18:57

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

CSS rounded corners will not work. Either use images or a CSS-mask.

Here is a thread with how to do a CSS mask.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 25 '12 at 18:29

PRNDL Development Studios

3,270
2
35
50

score -2 · Answer 2 · answered Apr 25 '12 at 18:59

-2

Presume you have tried CSS rounded corners?

#container {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

answered Apr 25 '12 at 18:59

flurdy

3,782
29
31

Renders at first, then the corners go back to square. – user1290284 Apr 25 '12 at 19:15
Strange. Reproducable in different browsers? – flurdy Apr 25 '12 at 19:34
It is a known problem with google maps. http://www.google.com/#hl=en&sclient=psy-ab&q=rounded+corners+css+google+maps&oq=rounded+corners+css+google+maps&aq=f&aqi=&aql=&gs_nf=1&gs_l=hp.3...2226.8082.0.8209.31.21.0.10.10.1.337.1867.17j2j1j1.31.0.B9o3jq0XCvQ&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=10aa8b4599b06781&biw=1233&bih=714 – PRNDL Development Studios Apr 25 '12 at 19:56

How can I make my Google Map V3 retain rounded corners?

2 Answers2