Blue border around image link


I have set an image as a link and I am checking the page in diverse browsers.

There is a blue border in Internet Explorer and other browsers and I do not know what represents or how to remove it.

Thanks very much.

Hi Jonathan.

If no style is applied to the links, they are rendered in blue underlined text for unvisited links and other colors in the case of visited and active links.

These codes are also applied to images contained inside elements by the corresponding colored border.

To remove such a border, just apply the appropriate css style.

For instance:

#the-selector a img {
border: 0

It worked. Thanks.

Sorry Jonathan.

#the-selector a img {
border: none

There is a difference: “0” sets the width, and “none” the style.

As we want to remove the border, “none” would be the right property.

It is not the same thing, although the result would be the same.

If it is still showing in some browsers try setting outline to none as well.

No, José was right. There is no border at all after applying “border: none”.

Thanks anyway.

The problem seems to be over, but I would like to add that it is quite common and has nothing to do with outline, but with the border element, since some browsers add a blue border to images included in “a” elements if no styling is applied.

You are correct the outline only affects dotted borders.

It will be good solution if we write the border: none or border:0 in default style sheet so that it may not get effected in future too like below example

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-size: 100%;
font: inherit;
vertical-align: baseline;

Remember, though, that the purpose of the blue border is not to annoy designers ;), but to indicate to site users that the image is a link. If you remove the border, you need to provide some other indication.

Like I said, border: none and border:0 are not the same thing.

Your approach could be a general solution or not, depending on the needs of the project.

I must disagree with you TechnoBear. This problem only affects early versions of Internet Explorer. The blue border does not show in advanced browsers.

Obviously you must provide some indication for the user to know that there is a link in the page, but there is no need to display such a border, which in the most of cases spoils the design. Modern users have enough experience and navigation skills to know when an image or graphic element is a link without our help.