Leaflet: Map tiles are not clipped by border-radius in Webkit

Created on 26 Mar 2013 · 8Comments · Source: Leaflet/Leaflet

Setting border-radius on the #map div does not affect the map itself. Not sure if this is a bug in Webkit, Leaflet, or expected behavior. Looks good in Firefox and IE 9.

Caroline DES

Source

frankrowe

Most helpful comment

I got this to work in chrome (v38.0.2125.122) by adding z-index: 0 to the map container if that helps anyone.

gwithian on 13 Nov 2014

👍11 ❤3 🎉3

All 8 comments

This is a browser bug. :( Not possible to fix from Leaflet side as far as I know. I wanted to add border radius to examples on the website but no luck...

mourner on 26 Mar 2013

Same thing here with Chrome only. I just put a 1px white border around the map div and it's good enough for me. As long as it's a light map. Not worth the effort to research with my skill set.

geomajor56 on 26 Mar 2013

I got this to work in chrome (v38.0.2125.122) by adding z-index: 0 to the map container if that helps anyone.

gwithian on 13 Nov 2014

👍11 ❤3 🎉3

@gwithian wow, really surprised that this fixes it.

mourner on 13 Nov 2014

Thank you so much for this answer <3

clentfort on 14 Feb 2015

Hey, I tried @gwithian trick and it works well, even with another value. Seems that just to specify a z-index make it work (Chrome Version 49.0.2623.112 )