Remove blue image border in Internet Explorer

So you have your site displaying images as links and it works in Firefox, Safari and Chrome, but in Internet Explorer you get a very annoying blue border around the image?

This a cross-browser CSS incompatibility problem and IE seems to suffer more than others.

The fix is a line of code that will be compatible with all browsers. Find your style sheet (usually style.css) and add this line towards the top:

a img {border: none;}

If you want a border use this:

a img {border: 1px solid #CCCCCC;}

If you’ve want a border when the mouse moves over the image, use this:

a:hover img {border: 1px solid #CCCCCC;}

Simple and effective. Drop me a comment if this helped you out.