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.
Created attachment 8108 [details] Test case for bug #8736
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.
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
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.
Discussion is going on on www-style about this, my guess is info on how to handle this will be added to the spec.
www-style archive link: <http://lists.w3.org/Archives/Public/www-style/2006Jul/0017.html>.
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 ∈ {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
I'm working on this.
*** Bug 21332 has been marked as a duplicate of this bug. ***
Created attachment 30419 [details] Patch, changelog, 2 new testcases
Comment on attachment 30419 [details] Patch, changelog, 2 new testcases I think I got the algorithm wrong. Stand by.
Created attachment 30420 [details] New patch, changelog, testcases
Comment on attachment 30420 [details] New patch, changelog, testcases r=me
Committed in r44235.
Thanks Brent, and sorry I didn't commit this earlier.