Search code examples
google-chromewebkitclippingcss

Chrome - children clip css3 rounded border?

Please see the following JSFiddle:

http://jsfiddle.net/zScKW/

Notice that the child div clips the border of its parent. If I remove the border (but keep the rounded corners), the item clips as we would expect. Firefox 4 renders this markup as I expect, with the item clipped before the border starts. Chrome, however, does not clip the child until the border's outer edge is reached.

Who has this behavior correct, and is there a hack? I am fine with leaving it in chrome if it is a bug that will be fixed, but I will need to tweak the layout if it is rendering to spec in Chrome.

(please note before you vote to close, this is a different bug than the multiple threads about a firefox 3.5/Chrome bug which prevented items from being clipped at all by rounded borders)

Solution

  • Give the child element a radius of half the border-radius of its parent.

    border-top-left-radius: 5px;

    Example here: http://jsfiddle.net/zScKW/1/