The background color of an element with -webkit-border-radius set, and with a border whose color differs from the element's background, shows through at the outer edges of the rounded corners. A 1-pixel line in the color of the element's background shows around the outer edges of each of the rounded corners. The line is always there when there is a border and background color, but some color combinations make it more or less obvious.
I'll include a simplified test case and image to help clarify the issue.
Created attachment 24582 [details]
A demonstration of the problem.
Created attachment 24583 [details]
The demonstration rendered in my build of WebKit.
*** Bug 25586 has been marked as a duplicate of this bug. ***
I can confirm this bug with the latest WebKit nightly on Windows 7.
I actually noticed this bug on my own while working on a recent project. I'm glad this bug has already been submitted. Saves me time. :P
I was just noticing that Firefox seems to have the inverse or this issue. In some circumstances you can see a very tiny gap between the background of an element and the inside of the border.
*** Bug 39276 has been marked as a duplicate of this bug. ***
*** Bug 33621 has been marked as a duplicate of this bug. ***
*** Bug 34656 has been marked as a duplicate of this bug. ***
*** Bug 40509 has been marked as a duplicate of this bug. ***
Created attachment 90294 [details]
Attachment 90294 [details] did not build on chromium:
Build output: http://queues.webkit.org/results/8471529
Comment on attachment 90294 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=90294&action=review
> + If the border is opaque on all sides, we can inset the border by
I think you mean “inset the background”
> + Helper method to determine if this border side will totally
> + the border edge, allowing us to inset it.
You totally a word
> + roundedBorder.inflate(-1);
Does this do the right thing for 1-by-n and 2-by-n borderRects?
> + if (!isPresent || isTransparent || width < 2 || color.hasAlpha() || style == BHIDDEN)
> + return false;
> + if (style == DOTTED || style == DASHED)
> + return false;
> + if (style == DOUBLE)
> + return width >= 5; // The outer band needs to be >= 2px wide.
These comparisons should be in device (well, painting root) space, not user space. For example, if you have a plain .5 scale transform, the width needs to be at least 4, etc. Worth a comment, perhaps.
> + edges[BSTop] = BorderEdge(style->borderTopWidth(),
> + style->visitedDependentColor(CSSPropertyBorderTopColor),
> + style->borderTopStyle(),
> + style->borderTopIsTransparent(),
> + horizontal || includeLogicalLeftEdge);
> + edges[BSRight] = BorderEdge(style->borderRightWidth(),
> + style->visitedDependentColor(CSSPropertyBorderRightColor),
> + style->borderRightStyle(),
> + style->borderRightIsTransparent(),
> + !horizontal || includeLogicalRightEdge);
> + edges[BSBottom] = BorderEdge(style->borderBottomWidth(),
> + style->visitedDependentColor(CSSPropertyBorderBottomColor),
> + style->borderBottomStyle(),
> + style->borderBottomIsTransparent(),
> + horizontal || includeLogicalRightEdge);
> + edges[BSLeft] = BorderEdge(style->borderLeftWidth(),
> + style->visitedDependentColor(CSSPropertyBorderLeftColor),
> + style->borderLeftStyle(),
> + style->borderLeftIsTransparent(),
> + !horizontal || includeLogicalLeftEdge);
http://trac.webkit.org/changeset/84341 might have broken Leopard Intel Release (Build) and Leopard Intel Debug (Build)