Bug 79346 – border-radius and gradient are in conflict

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

you can see the attachment.
i checked every attribute in web inspector, if i disable "border-radius"; it is fixed.

this is default settings.
.primary-nav a {background: #3f4752; display:block; padding: 0 8px; height:36px; line-height:36px; font-size:14px; color: #aaa; border-top:1px solid #687688; border-bottom: 1px solid #2a3442; text-decoration:none; -webkit-box-shadow: inset 0 -3px 2px #3f4752; -moz-box-shadow: inset 0 -3px 2px #3f4752; box-shadow: inset 0 -3px 2px #3f4752}

this is gradient syntax:
.primary-nav a, .logout, .pasreset, .ticketc {background: #5a6574; background: -moz-linear-gradient(top, #5a6574 0%, #3f4752 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a6574), color-stop(100%,#3f4752)); background: -webkit-linear-gradient(top, #5a6574 0%,#3f4752 100%); background: -o-linear-gradient(top, #5a6574 0%,#3f4752 100%); background: -ms-linear-gradient(top, #5a6574 0%,#3f4752 100%); background: linear-gradient(top, #5a6574 0%,#3f4752 100%);}

and this is css of border-radius:
.primary-nav a, #userplus li a {-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -o-border-top-right-radius: 3px; -ms-border-top-right-radius: 3px; border-top-right-radius: 3px;}

Created attachment 128429 [details]
this is the screenshot of wrong compilation.

i'm not sure if i've selected browser version right but it happens in chrome v.17 windows 7.

[Shezan Baig]

can you attach a minimal html file that reproduces the issue?
See: http://www.webkit.org/quality/reduction.html

[Simon Fraser (smfr)]

Not enough information to reproduce.