81494 2012-03-18 23:13:44 -0700 CSS3 border-radius bug with border, padding, position:relative and any child element 2012-07-25 23:42:54 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All All RESOLVED DUPLICATE 77572 http://jsfiddle.net/laukstein/y2jKH/1/show P1 Major --- 0 7raivis webkit-unassigned 7raivis shanestephens oldest_to_newest 581639 0 132547 7raivis 2012-03-18 23:13:44 -0700 Created attachment 132547 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). 584922 1 shanestephens 2012-03-21 20:25:45 -0700 *** This bug has been marked as a duplicate of bug 77572 *** 678922 2 7raivis 2012-07-25 23:42:54 -0700 Still not solved on Chrome 22.0.1217.0 canary. 132547 2012-03-18 23:13:44 -0700 2012-03-18 23:13:44 -0700 Child element must nicely much to parent element border-radius including border and padding. css3-border-radius-bug-with-child-element.png image/png 5425 7raivis iVBORw0KGgoAAAANSUhEUgAAAYgAAABzCAIAAAANAwIfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlE PSJ4bXAuaWlkOjYwRUM1NDVFRjA0RjExRTBBQjQ1OEU2RjYwOEI1Q0QzIiB4bXBNTTpEb2N1bWVu dElEPSJ4bXAuZGlkOjYwRUM1NDVGRjA0RjExRTBBQjQ1OEU2RjYwOEI1Q0QzIj4gPHhtcE1NOkRl cml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjBFQzU0NUNGMDRGMTFFMEFCNDU4 RTZGNjA4QjVDRDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjBFQzU0NURGMDRGMTFFMEFC NDU4RTZGNjA4QjVDRDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1l dGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ho44jAAARp0lEQVR42uydXWxVVRqGT0c09MIgQk2GBGVk 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 AABJRU5ErkJggg==