l008comm - 11:36 am on Jun 7, 2011 (gmt 0)
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):
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.
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?