Bug 8736 - webkit-border-radius does not show if radius is more than half the side length
Summary: webkit-border-radius does not show if radius is more than half the side length
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 420+
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Simon Fraser (smfr)
: 21332 (view as bug list)
Depends on:
Reported: 2006-05-04 12:07 PDT by Lewis Francis
Modified: 2009-05-28 10:47 PDT (History)
6 users (show)

See Also:

Test case for bug #8736 (1009 bytes, text/html)
2006-05-04 12:08 PDT, Lewis Francis
no flags Details
Patch, changelog, 2 new testcases (26.82 KB, patch)
2009-05-16 20:38 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff
New patch, changelog, testcases (28.20 KB, patch)
2009-05-16 21:37 PDT, Simon Fraser (smfr)
oliver: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Lewis Francis 2006-05-04 12:07:47 PDT
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.
Comment 1 Lewis Francis 2006-05-04 12:08:52 PDT
Created attachment 8108 [details]
Test case for bug #8736
Comment 2 Nicholas Shanks 2006-06-04 09:27:43 PDT
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.
Comment 3 Joost de Valk (AlthA) 2006-07-06 05:46:48 PDT
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? 


<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,
Comment 4 Lewis Francis 2006-07-06 06:25:22 PDT
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.
Comment 5 Joost de Valk (AlthA) 2006-07-07 05:20:29 PDT
Discussion is going on on www-style about this, my guess is info on how to handle this will be added to the spec.
Comment 6 Alexey Proskuryakov 2007-07-02 05:24:07 PDT
www-style archive link: <http://lists.w3.org/Archives/Public/www-style/2006Jul/0017.html>.
Comment 7 Simon Fraser (smfr) 2009-05-15 11:58:16 PDT
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."

Comment 8 Simon Fraser (smfr) 2009-05-15 23:23:18 PDT
I'm working on this.
Comment 9 Simon Fraser (smfr) 2009-05-15 23:26:45 PDT
*** Bug 21332 has been marked as a duplicate of this bug. ***
Comment 10 Simon Fraser (smfr) 2009-05-16 20:38:27 PDT
Created attachment 30419 [details]
Patch, changelog, 2 new testcases
Comment 11 Simon Fraser (smfr) 2009-05-16 20:43:15 PDT
Comment on attachment 30419 [details]
Patch, changelog, 2 new testcases

I think I got the algorithm wrong. Stand by.
Comment 12 Simon Fraser (smfr) 2009-05-16 21:37:16 PDT
Created attachment 30420 [details]
New patch, changelog, testcases
Comment 13 Oliver Hunt 2009-05-19 23:21:24 PDT
Comment on attachment 30420 [details]
New patch, changelog, testcases

Comment 14 Brent Fulgham 2009-05-28 09:55:35 PDT
Committed in r44235.
Comment 15 Simon Fraser (smfr) 2009-05-28 10:47:15 PDT
Thanks Brent, and sorry I didn't commit this earlier.