RESOLVED WORKSFORME 34307
border-radius renders incorrectly with one-sided border
https://bugs.webkit.org/show_bug.cgi?id=34307
Summary border-radius renders incorrectly with one-sided border
Tobin Baker
Reported 2010-01-28 21:44:20 PST
Created attachment 47675 [details] HTML page demonstrating the issue. When a border is specified on only a single side of a block element and -webkit-border-radius (or border-radius in Chrome or WebKit nightlies) is specified, the border renders incorrectly (see attached HTML test case). The same page renders correctly in Firefox 3.5.7 (when the -moz-border-radius property is substituted), as another attached screenshot demonstrates. I consider this a high-priority bug since it forced me to abandon using rounded corners in a site I am currently developing (except for Firefox users). This repros on Safari 4.0.4 (6531.21.10), WebKit nightly build from 1/28/2010 (r53990), and Chrome 4.0.249.49 (35163) beta. All tests were on a MacBook Pro 4.1 running OS X 10.6.2.
Attachments
HTML page demonstrating the issue. (521 bytes, text/html)
2010-01-28 21:44 PST, Tobin Baker
no flags
Demonstrates the issue in WebKit browsers (displays the HTML test case). (33.10 KB, image/jpeg)
2010-01-28 21:49 PST, Tobin Baker
no flags
Demonstrates correct behavior in Firefox (displays the HTML test case). (35.18 KB, image/jpeg)
2010-01-28 21:51 PST, Tobin Baker
no flags
testcast with more cases (1.65 KB, text/html)
2010-10-18 09:20 PDT, Julien Wajsberg
no flags
screenshot of new testcase in chrome (34.70 KB, image/png)
2010-10-18 09:22 PDT, Julien Wajsberg
no flags
screenshot of new testcase in Firefox 3.6 (10.41 KB, image/png)
2010-10-18 09:23 PDT, Julien Wajsberg
no flags
testcase with more cases (updated for Opera and without prefixes) (1.99 KB, text/html)
2010-10-27 02:46 PDT, Julien Wajsberg
no flags
Tobin Baker
Comment 1 2010-01-28 21:49:16 PST
Created attachment 47676 [details] Demonstrates the issue in WebKit browsers (displays the HTML test case).
Tobin Baker
Comment 2 2010-01-28 21:51:33 PST
Created attachment 47677 [details] Demonstrates correct behavior in Firefox (displays the HTML test case).
Julien Wajsberg
Comment 3 2010-10-18 09:20:22 PDT
Created attachment 71042 [details] testcast with more cases This testcase further demonstrates this bug. Please note also that Box E and Box F should be identical for the left border, but they're not.
Julien Wajsberg
Comment 4 2010-10-18 09:22:50 PDT
Created attachment 71043 [details] screenshot of new testcase in chrome
Julien Wajsberg
Comment 5 2010-10-18 09:23:15 PDT
Created attachment 71044 [details] screenshot of new testcase in Firefox 3.6
Simon Fraser (smfr)
Comment 6 2010-10-18 11:19:00 PDT
Julien Wajsberg
Comment 7 2010-10-27 02:46:18 PDT
Created attachment 71998 [details] testcase with more cases (updated for Opera and without prefixes) Opera has some bugs too. Modified this testcase to exhibit them in Opera too.
Simon Fraser (smfr)
Comment 8 2011-04-17 14:53:28 PDT
The first testcase already looks fine. The latter one still shows some issues.
Simon Fraser (smfr)
Comment 9 2011-04-17 22:22:30 PDT
This appears to be fixed now.
Note You need to log in before you can comment on or make changes to this bug.