incorrect rendering of CSS border-radius creates pixellated look

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Dave]

When an element with both a background and a border has a CSS border radius applied to it, the element's corners look pixellated.

Upon closer inspection, it looks like what's going on is that the background is being antialiased in such a way that it bleeds through the border on top of it, appearing to spill outside the border. (It may be that they're being antialiased the same way, but that the semitransparent nature of antialiased pixels results in the background showing through.)

One possible fix might be to draw the background so it extends only halfway to the edge of the border (0.5px for a 1px border), and figure the actual pixels based on that. Dunno if that would work.

In the interim I've only been able to think of one workaround: use two HTML elements. Do the "border" as a background on the outer element. Make the inner element 1px smaller on each side, and use its background for the actual background of the box. It's border radius then needs to be 1px smaller than that of the outer element.

You can see the problem in action by flipping through the jQuery themes at http://tinyurl.com/dbqg2t

[Alexey Proskuryakov]

Duplicate of bug 21819? We actually have lots of bugs that seem to be duplicates - someone who has an idea about how these are drawn should clean those up. Just search for open bugs with "border radius" words in title.

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 21819 ***