Bug 34307 - border-radius renders incorrectly with one-sided border
Summary: border-radius renders incorrectly with one-sided border
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2010-01-28 21:44 PST by Tobin Baker
Modified: 2011-04-17 22:58 PDT (History)
5 users (show)

See Also:

Attachments
HTML page demonstrating the issue. (521 bytes, text/html)
2010-01-28 21:44 PST, Tobin Baker 		no flags Details
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 Details
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 Details
testcast with more cases (1.65 KB, text/html)
2010-10-18 09:20 PDT, Julien Wajsberg 		no flags Details
screenshot of new testcase in chrome (34.70 KB, image/png)
2010-10-18 09:22 PDT, Julien Wajsberg 		no flags Details
screenshot of new testcase in Firefox 3.6 (10.41 KB, image/png)
2010-10-18 09:23 PDT, Julien Wajsberg 		no flags Details
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 Details
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Tobin Baker 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.
Comment 1 Tobin Baker 2010-01-28 21:49:16 PST 
Created attachment 47676 [details]
Demonstrates the issue in WebKit browsers (displays the HTML test case).
Comment 2 Tobin Baker 2010-01-28 21:51:33 PST 
Created attachment 47677 [details]
Demonstrates correct behavior in Firefox (displays the HTML test case).
Comment 3 Julien Wajsberg 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.
Comment 4 Julien Wajsberg 2010-10-18 09:22:50 PDT 
Created attachment 71043 [details]
screenshot of new testcase in chrome
Comment 5 Julien Wajsberg 2010-10-18 09:23:15 PDT 
Created attachment 71044 [details]
screenshot of new testcase in Firefox 3.6
Comment 6 Simon Fraser (smfr) 2010-10-18 11:19:00 PDT 
<rdar://problem/8563236>
Comment 7 Julien Wajsberg 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.
Comment 8 Simon Fraser (smfr) 2011-04-17 14:53:28 PDT 
The first testcase already looks fine. The latter one still shows some issues.
Comment 9 Simon Fraser (smfr) 2011-04-17 22:22:30 PDT 
This appears to be fixed now.