The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Google Map with transparent rounded corners in Chrome

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #43742

    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]( “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!!!


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


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.