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开发者_如何学C 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)

---

Actually all you need to is add position:relative to the child element.

---

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/

---

I post related bug for it in http://code.google.com/p/chromium/issues/detail?id=99364