- From: Rob Crowther <robertc@boogdesign.com>
- Date: Wed, 14 Jul 2010 19:25:39 +0100
- To: www-style@w3.org
Hi All If overflow: hidden is set on an element with border-radius applied, any contained content should also be clipped by the border radius (according to http://www.w3.org/TR/css3-background/#corner-clipping). I know this currently doesn't happen in Firefox, but it works in WebKit. However a question came up on StackOverflow a few minutes ago where the poster was finding it not working in WebKit. After a bit of mucking around we realized it was because the elements had position: relative; set. I've uploaded an example page: http://www.boogdesign.com/examples/clipping.html 0: The initial example, position: relative set on both, no clipping. 1: Position removed from both, clips correctly in Chrome 6. 2 & 3: Position removed from parent and child respectively, no clipping. 4: Child element offset, the straight sides are clipped correctly but the bottom right corner isn't. My question is: should relative position break corner clipping, or is this a bug? Rob
Received on Wednesday, 14 July 2010 18:25:43 UTC