CSS3 border-radius bug with border, padding, position:relative and any child element

• Component: CSS
• Status: RESOLVED DUPLICATE

[Binyamin]

Created attachment 132547 [details]
Child element must nicely much to parent element border-radius including border and padding.

Referring to: http://code.google.com/p/chromium/issues/detail?id=99364

Related URL: http://jsfiddle.net/laukstein/y2jKH/show/ (code in http://jsfiddle.net/laukstein/y2jKH/)

Steps to reproduce the issue:
Browser does not render CSS3 border-radius child element in right way. It falls on using border and padding for parent element.

What do you expect to happen?
Child element must nicely much to parent element border-radius including border and padding. I have attached image that might describe better this bug.

What do you see instead?
Child element renders parent element border-radius after the padding and not before this style properties how it would be expected to be.

Browsers with the same bug:
Safari 5.1.4 has bug with border and padding
Chrome 19.0.1073.0 canary, FF Nightly 14.0a1 (2012-03-18), IE9 has bug with with padding
Opera 11.61 has bug with with border, padding and overflow

Chrome 19.0.1073.0 canary and Safari 5.1.4 has serious bug on using position:relative to the parent element - child element ignores parent style property border-radius at all. Demo http://jsfiddle.net/laukstein/y2jKH/1/show/ (edit mode http://jsfiddle.net/laukstein/y2jKH/1/)

Related bug posted in http://stackoverflow.com/questions/5421622 with overflow:hidden and no border or padding, demo http://jsfiddle.net/zScKW/show/ (works fine on FF7 and IE9).

[Shane Stephens]

*** This bug has been marked as a duplicate of bug 77572 ***

[Binyamin]

Still not solved on Chrome 22.0.1217.0 canary.