3

I'm trying to apply style with border-radius:XXpx to my openlayers map:

map = new OpenLayers.Map(name)
map.addLayer(new OpenLayers.Layer.OSM())

But rounded corners are hidden by tiles of the map: screenshot

Is there any way to resolve this?

UPD:

There are following styles applied to my div:

<div id="map"></div>

styles:

#map {
    border: solid 1px red;
    border-radius: 10px;
    overflow: hidden;
}

And overflow:hidden does not help

UPD 2

I can't make this code to work in Chrome (several versions)

  • I think this might be a better fit on stackoverflow – Devdatta Tengshe Mar 14 '13 at 13:34
1

Mozilla / Safari / IE

#map {
    border-radius: 10px;
    overflow: hidden;
}

Chrome

#map {
    border-radius: 10px;
    overflow: hidden;
}

#map div canvas{
    border-radius: 10px;
}
  • I'm developing an app with electron (chromium) and I had to use the #map div canvas css. Did not include the #map, and it worked. I'm not sure I understand why. An explanation would be super helpful. Cheers. – DanCat Jan 16 '17 at 16:24
  • 1
    Its just how css selectors work. Only “canvas“ would work too, but then you might apply the style to other parts of the page you didnt want to. If there is only one canvas element you are fine ! – Alexis_A Jan 17 '17 at 17:58
1

You could try to add both border-radius and overflow:hidden to your div element.

  • Sorry, I forgot to say that overflow:hidden doesn't solve this problem – Peter Yeremenko Mar 15 '13 at 11:55
0

I found answer on Stackoverflow.

Short: This is a bug/feature of Chrome, in other browsers border-radius + overflow:hidden works nicely.

In detail (copypasted from Stackoverflow):

After reading the comment on Chrome I tried to get it working with Chrome but that does not seem to be possible after reading border-radius in Chrome bug? and CSS Border radius not trimming image on Webkit and using chromes dev tools to modify the element styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.