Google Map with transparent rounded corners in Chrome

[fooman]

Apparently there is a bug in webkit, or so I’ve come to understand, that will cause Chrome to not hide the inner div’s contents when using border-radius.

Is there any decent way to do this? I’ve looked at using -webkit-mask-image, but using a radial gradient is just way too difficult to use as a work-around in this case.

I found an SVG that I stumped upon to get this going with -webkit-mask-image, but the SVG’s radius’s are not precise and therefore cuts off the corner a bit differently.

You can see the issue [in this pen](http://codepen.io/gurnzbot/pen/lebos “in this pen”)
Open it in Chrome, then Firefox. FF has nice rounded corners. Chrome is squared.

If anyone can help, that would be great!!!

[Gingerbread]

Dumb question, but have you tried :
overflow:hidden ?

[CrocoDillon]

Even dumber question if you’d have looked at the Pen ;) It’s weird, setting border-radius on map too helps some, but only on the right side.

[Author]

Posts