border-radius matte problems

[l008comm]

Sooo I'm using the border-radius (and all it's browser-specific twins) a lot lately. And one bug is driving me nuts. Every browser has it the exact same...

I'll try to describe it since I can't link to my site:
When a rounded border is drawn, it is drawn anti-aliased. Of course, otherwise it would look quite bad. So when you anti-alias something, you are blending object with background. The problem is that the OUTSIDE of the curve of a border-radius, gets blended with the background color of the object. In other words, it's using the inside color on the outer edge.

Here is an image that will make it very clear. These DIVs have about a 6 pixel border and a 20 pixel radius (approximately):
[img195.imageshack.us...]

As you can see, the outer edge of the curve is being drawn against the light grey inner color, rather than the outer color, which in this case is pure black. If your inner color and outer color are similar, you won't notice this. But if they are different, it's pretty harsh. On another site, the inside of the box is white and the background is a strong red color.

So the result is a very amateurish look. Like I made some .gif's for my site, and didn't understand what a matte was, and picked the wrong color.

Another example:
[img822.imageshack.us...]

So my big question is, is there a way to work around this?
OOOOH this just in, Firefox 4.0.1 fixed this. So at this point, it seems to be just a WebKit issue. Any CSS-hack/work around?

[Paul_o_b]

Try:

-webkit-background-clip: padding-box;

[tumble.sneak.co.nz...]

[alt131]

Yup, my first thought was the background bleeding through and tried that - and when it failed a search revealed I wasn't alone. Then checked the candidate recommendation, and the background should be clipped to the curve, so on second thoughts, if a conforming browser has implemented border-radius it should also have implemented the clip, so an explicit setting should be redundant. Duh! ;)

Given the border is deep enough on full zoom to require some px to be transparent to create the impression of a curve, I also tested using a transparent border colour, and rgba. The first reproduced the effect using the background-color - which indicates background was being clipped (and hence the above failed as a "fix") , and rgba made no difference. Trying to "patch/blend" the undesired effect using a border-shadow didn't help. That took me for a wander though the svg recommendation, alpha compositing, shape rendering etc - interesting things, but not directly helpful here.

There are a lot of bug reports about this, and I think this may rendering artefacts, not style.

Colours are definitely relevant to how "bad" it looks. l008comm, my quick tests suggest you've found the very best colour combinations to illustrate this :)

Something like the following on full zoom, swap the colours around and note how the artefacts appear on the inside and straight edges of the border, as well as a few px out into the body.
body {background-color:red;}
#mydiv {
width:100px;
height:100px;
margin: 0 auto;
color:#888;
background-color: #ddd;
border-style:solid;
border-color:#888;
border-width:20px;
border-radius: 6px;
}

A reminder a browser isn't a graphics prog, but very interesting ... any other approaches that might help?

[Paul_o_b]

I am actually seeing improved rendering in Safari using the background-clip I mentioned above.

The rule must not be before any shorthand background properties or else it gets over-ruled for some reason.

#mydiv {
width:100px;
height:100px;
margin: 0 auto;
color:#888;
background-color: #ddd;
border-style:solid;
border-color:#888;
border-width:20px;
border-radius: 6px;
 -webkit-background-clip: padding-box;
}

Run those two side by side in Safari on max zoom and then compare and you can see the bleed is much better.

[Paul_o_b]

It gets over-ruled because background-clip is a background property of course which is what I meant to say.:)

[alt131]

;)

... but unfortunately I can't see a difference. Having once failed to see a 3px gap for almost an entire thread, this should not be treated as final until confirmed by my seeing-eye dog :) Also tweaked display settings. Do the variations suggest machine rather than browser perhaps?

I need to sign out, but have you run the samples through Op11 winsafari5, ff4 and observed the results of different values for background-clip? Further fun in setting border-style:double, inset/outset illuminating, as is commenting out border-color background-color and colour. I had a vague notion some border-drawing issues had been corrected, so definitely back to investigate further tomorrow.

[Paul_o_b]

I see a difference in Safari 5.05 PC and the same on my mac but it's only a few minor stray pixels and not as bad as the OPs original screenshots - but background-clip does fix it on both. (I do have a screenshot online but didn't post it in respect of your link policy.)

Unfortunately background-clip has the opposite effect in opera 11 and the whole background floods in the corner and is unusable so care must be taken to avoid opera seeing background-clip when using border-radius.

I expect that older Safari are even worse but I don't have an older version to check with anymore unfortunately. There well may be variations between systems, browsers and perhaps the actual size of the radius.

It would be interesting to know all the details in the OP's screensshot (system,browser version and styles used etc).

[alt131]

Hi Paul - no need for a screen shot (and appreciate you respecting the policy). I completely accept you're seeing an improvement - my point was that as I'm not, maybe parts of this are machine (not style) issues - especially as there are so many reports of this not working for others as well. Wouldn't be the first time our collaborative approach at WebmasterWorld has analysed a common solution and improved understanding of how it works, identified it's limitations, or found a better one!

I'm not sure how my post suggested a need to "prove" there was an improvement - but you have my unqualified apology if it read that way!

Back to code - did you treat yourself to winSafari5 with border-style double? Hilarious. Of course v3 doesn't understand, and winSafari5 overwrites v4 - have been hoping Lucy would drop in as she's on Macs and might have a v4 somewhere.

Op11 and 10.53 were interesting - they do respond to different values for background-clip (the colours change as would be expected). But are drawing a small gap in the outside border at either end of the curve so it looks like a clipped bus ticket (from the days when paper tickets were manually punched with things like pliers). Plus 10.53 also curves the inside of the border, but gets the colours wrong. Fascinating!