W3C home > Mailing lists > Public > www-style@w3.org > July 2010

[css3] Border radius, clipping and relative positioning

From: Rob Crowther <robertc@boogdesign.com>
Date: Wed, 14 Jul 2010 19:25:39 +0100
Message-ID: <4C3E0123.70508@boogdesign.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:29 GMT