Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?


There are following styles applied to my div:

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


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

And overflow:hidden does not help


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

share|improve this question
I think this might be a better fit on stackoverflow –  Devdatta Tengshe Mar 14 '13 at 13:34

2 Answers 2

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

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

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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