Blue hyperlink border around images in HTML

Blue Hyperlink Border Around Images in HTML

When an image is wrapped in a hyperlink, many browsers historically rendered a visible blue border around the image. While this behavior helped users identify clickable elements, it often results in pages that look unpolished or visually inconsistent—especially on technical documentation and industrial automation websites.

On engineering-focused sites like Chipkin’s, images are frequently used for diagrams, wiring examples, protocol illustrations, and product photos. In these cases, an unexpected blue border adds visual noise and detracts from clarity. Fortunately, this behavior can be disabled using either CSS or inline styling.

img {
    border-style: none;
}
        

a img {
    border: 0;
}
        

Method 2: Removing the Border Inline (Legacy / Targeted Use)

In older HTML implementations, browsers applied borders directly to images inside hyperlinks. A common workaround was to explicitly disable the border on the image itself.

Because some CMS platforms aggressively sanitize or reinterpret HTML, the safest way to document this example is to show it using pseudo-HTML syntax rather than real tags.

Your code should look like this:

{a href="#"}
    {img src="image.png" style="border: 0;" alt=""}
{/a}
        

This example illustrates the structure clearly without risking broken markup or unintended links on the page. The border: 0 style prevents browsers from rendering a visible border around the image.

Frequently Asked Questions (FAQ)

Why does the blue border appear around linked images?

The border originates from older browser defaults that visually marked linked images. While modern browsers rely more on focus outlines, legacy behavior can still appear depending on CSS resets and theme styles.

Is removing the border safe?

Yes. Removing the border does not affect functionality. However, you should ensure that linked images still provide a clear interaction cue, such as a hover effect or caption.

Why not show real HTML tags in the example?

Some CMS platforms re-interpret angle-bracket tags even inside code blocks, which can result in broken markup. Pseudo-HTML avoids this entirely.

Is inline styling still acceptable?

Inline styles are acceptable for small, targeted fixes or legacy systems, but CSS remains the preferred approach for maintainability.