Overflow: hidden and border-radius

aka a square peg in a round hole

Div with image and Overflow: hidden and border radius in Chrome

When I was creating the Krantz and Sheldon architectural photographs meets Google Streetview mashup, (more posts to follow on that). I decided that as the Krantz and Sheldon archive was from the sixties that instead of rectangular images, the images should be circular, which should of been a piece of cake using border-radius CSS3 property. As the dimensions of each photograph was different, the only way to achieve this was to make sure each image filled a fixed size containing div. The easiest way to do this was to fix the width of each photograph, then give it a negative left margin so it was centred. Then apply overflow: hidden to the div so only portion of the photograph would be visible. I then applied border-radius to the containing div and perfectly circular images in my the browser I was testing in, Firefox 4.

Off course the world is not perfect, on Library Hack day, I had to use another computer and Chrome to show the concept to crowd. The circular images where replaced with square images, even though the containing divs had a circular drop-shadow. Webkit browsers, Opera and Firefox 3 can not deal with a border radius applied to contents of an element with overflow: hidden. Instead you the overflow is only hidden outside the rectangular box.

So nice concept, but flawed implementation until the browsers catch up. The circular version for those using Firefox4 or IE9, of wish to see round shadows from square obects in Safari, Chrome and Opera.

Comments are closed.