Bug 8736 – webkit-border-radius does not show if radius is more than half the side length

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Lewis Francis]

There seems to be some sort of relationship between font size and the webkit-border-radius property value for form fields. In the test case, having a smaller font size than the radius value prevents rounding of the field.

[Lewis Francis]

Created attachment 8108 [details]
Test case for bug #8736

[Nicholas Shanks]

If i'm not mistaken, this is because the second box is not tall enough to have 20px borders, so they get turned off. I think it's only indirectly related to the text size.

[Joost de Valk (AlthA)]

Sent the following message to www-style, i propose waiting for an answer on it before we do anything with this bug:

When an element has a border-radius that is more than half the the element's width or height, should it draw a border at all? 

F/I:

<div style="height: 50px; width: 50px; border-radius: 30px; background-color: #0f0;"></div>

In WebKit, this div will not be rounded, since it's height is to low to have a rounded with a radius of 30px. The spec, up till now, says nothing of how to behave in this situation. My suggestion would be to add:

"If the border-radius is more than half of the width or height of an element, the border-radius is not drawn at all."

I'd like to hear your opinion on this situation.

For reference, this is bug 8736 in WebKit's bugzilla.

Kind regards,
Joost

[Lewis Francis]

We might also look towards how Firefox handles this; changing '-webkit' to '-moz' for either test case results in a rounded border; in the case of Joost's example, a circle.

[Joost de Valk (AlthA)]

Discussion is going on on www-style about this, my guess is info on how to handle this will be added to the spec.

[Alexey Proskuryakov]

www-style archive link: <http://lists.w3.org/Archives/Public/www-style/2006Jul/0017.html>.

[Simon Fraser (smfr)]

The latest CSS3 draft says:
"Corners do not overlap: When the sum of two adjacent corner radii exceeds the size of the border box, UAs must reduce one or more of the radii. The algorithm for reducing radii is as follows:
The sum of two adjacent radii may not be more than the width or height (whichever is relevant) of the box. If any sum exceeds that value, all radii are reduced according to the following formula: Let f = min(Li/Si), where i &#8712; {top, right, bottom, left}, Si is the sum of the radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f."

http://www.w3.org/TR/css3-background/#the-border-radius

[Simon Fraser (smfr)]

I'm working on this.

[Simon Fraser (smfr)]

*** Bug 21332 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Created attachment 30419 [details]
Patch, changelog, 2 new testcases

[Simon Fraser (smfr)]

Comment on attachment 30419 [details]
Patch, changelog, 2 new testcases

I think I got the algorithm wrong. Stand by.

[Simon Fraser (smfr)]

Created attachment 30420 [details]
New patch, changelog, testcases

[Oliver Hunt]

Comment on attachment 30420 [details]
New patch, changelog, testcases

r=me

[Brent Fulgham]

Committed in r44235.

[Simon Fraser (smfr)]

Thanks Brent, and sorry I didn't commit this earlier.