RESOLVED WORKSFORME 34621
-border-radius on narrow div is ugly 
https://bugs.webkit.org/show_bug.cgi?id=34621
Summary -border-radius on narrow div is ugly
James Robinson
Reported 2010-02-04 15:51:08 PST
Created attachment 48179 [details] Comparison of Firefox 3.5.7 (left) with Safari 4.0.4 (right) The following: <div style:"width:1px; height: 20px; -moz-border-radius:2px; -webkit-border-radius:2px; border: 1px solid green; background-color:green"> renders as an ugly 3px wide rectangle in WebKit and a not quite as ugly 3px wide rounded rectangle in Firefox.
Attachments
Comparison of Firefox 3.5.7 (left) with Safari 4.0.4 (right) (10.47 KB, image/png)
2010-02-04 15:51 PST, James Robinson 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2010-10-07 10:47:14 PDT
Still repros. I think we're clamping the radius based on the content box, not the border box?
David Barr
Comment 2 2011-05-11 23:25:58 PDT
(In reply to comment #1) > Still repros. I think we're clamping the radius based on the content box, not the border box? I've traced through the render code for this example and found that clamping is based on the border box. However, the issue is that the border radii must not overlap[1] and RoundedIntRec by nature does not allow fractional radii. So to satisfy both of these constraints the radii are rounded down after scaling. [1] http://www.w3.org/TR/css3-background/#corner-overlap
Simon Fraser (smfr)
Comment 3 2011-05-12 07:19:02 PDT
We now show a slight radius in this testcase. I think it has been fixed.
Note You need to log in before you can comment on or make changes to this bug.