Internet Explorer Issue with color profiles on rounded corners using images

Question

I am using images to provide rounded corners for internet explorer but the images are a slightly different shade than the actual border is in IE. This is not the case in Google Chrome or Firefox.

In IE the image corners are a slightly different shade than the rest of the border. I think this is because of "color profiles" but I still don't know how to fix the issue.

Answer 1

If you are using pngs to create your corner you need to strip the gamma information out for IE. A great tool for this is PNGOptimizer: http://psydk.org/PngOptimizer.php

Answer 2

Your best bet is to use images for the borders as well as the corners. The images for the borders should have the same color and format as your corners. Or you could drop the old-school approach and use CSS3 border radius properties along with an IE CSS3 hack such as CSS3PIE.

Answer 3

Only Safari 2.0+ and Firefox3.0+ (have to use an addon, but from 3.5 it's supported as default) support embedded color profiles.

You can work around this by using either images or border, not a mixture of both.

I use a rounded border image for IE with conditional comments to setup a new css file and CSS border-radius for the "real" browsers :)