Rounded Map Corners Anyone?

Darter02

Has anyone rounded the corners of the map block yet? If so, what CSS did you use?

Thanks in advance!

Darter02

Here's a layout I am working on right now.

Is it the .leaflet-map-pane I need to do something to? Hmmm...

Darter02

Tried this but no dice...

/* round the edges on maps */
.leaflet-map-pane .leaflet-tile  .leaflet-overlay-pane {
  border-radius: 10px;
 }

Darter02

.leaflet-zoom-animated

Didn't work either... dang...

Hikin' Mike

Try

.leaflet-container{
    border-radius: 10px;
    }

Darter02

You're my HERO!!

Here it is on a layout I'm working. Ever canoed the Tionesta Creek?

Darter02

Odd... it works in Firefox but not Chrome. On the right track though.

Hikin' Mike

I'm still adding the webkit (just because), but not sure if that will help.

    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius:10px;

I did one canoe trip when I was in Boy Scouts...a 50-mile trip. Can't remember were specifically though.

Darter02

I tried this, and it works in Firefox & IE, but not in Chrome.

/* round the edges on maps */
.leaflet-container{
border-radius: 10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
}

Hikin' Mike

Darter02 wrote: »

I tried this, and it works in Firefox & IE, but not in Chrome.

I didn't think it would work.