Why Normalize.css Removes the Default Border on Images Within Links in Internet Explorer 10

Normalize.css explicitly sets border-style: none on images to eliminate the automatic 1-pixel blue border that Internet Explorer 10 applies to linked images, ensuring consistent styling across all browsers.

The necolas/normalize.css project provides a modern, HTML5-ready alternative to CSS resets by preserving useful browser defaults while normalizing inconsistencies. One specific rule targets Internet Explorer 10's legacy behavior to remove the default border on images within links, a quirk that creates visual discrepancies between legacy and modern browsers.

The Internet Explorer 10 Linked Image Border Quirk

In Internet Explorer 10 and earlier versions, wrapping an <img> element inside an <a> tag automatically triggers a 1-pixel solid border around the image. This border renders in the browser’s default link color—typically blue—and was originally intended to provide users with a visual cue that the image is clickable. While modern browsers have dropped this behavior in favor of cleaner defaults, IE 10 maintains it for backward compatibility with legacy websites.

The Normalize.css Implementation

According to the necolas/normalize.css source code, the stylesheet neutralizes this IE-specific styling in the Embedded content section. The rule appears at lines 44-50 in normalize.css:

/* Remove the border on images inside links in IE 10. */
img {
  border-style: none;
}

The declaration uses border-style: none rather than the shorthand border: 0 for a specific architectural reason. By targeting only the border style, the rule suppresses IE 10’s default link border without affecting other border-related properties such as width or color. This approach allows developers to apply intentional borders later without fighting against a heavy-handed reset.

Practical Code Examples

Before normalization, IE 10 renders linked images with an unwanted blue border:

<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

After including the normalize.css stylesheet, the image renders without the legacy border, matching the appearance in Chrome, Firefox, and Safari:

<link rel="stylesheet" href="normalize.css">
<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

If your design requires visible borders on linked images, you can override the normalization by re-applying border styles in your custom CSS:

a > img {
  border: 2px solid #333;   /* Custom border overrides the normalize reset */
}

Summary

• Internet Explorer 10 automatically adds a 1-pixel blue border to images inside links for backward compatibility with legacy web standards.
• Normalize.css removes this default border by setting border-style: none on img elements in normalize.css (lines 44-50).
• The specific property choice preserves flexibility for developers who want to add custom borders later without resetting multiple border properties.
• This normalization ensures linked images display consistently across all browsers, from legacy IE to modern Chrome and Firefox.

Frequently Asked Questions

Why does Internet Explorer 10 add borders to linked images?

Internet Explorer 10 maintains this behavior from earlier browser versions to preserve backward compatibility with legacy websites. The 1-pixel solid border in the default link color (typically blue) was originally designed to signal to users that an image is clickable, a convention that modern browsers abandoned in favor of cleaner default styling.

Will this normalization affect modern browsers like Chrome or Firefox?

No. Modern browsers do not apply default borders to linked images, so the border-style: none declaration in normalize.css has no visible effect in Chrome, Firefox, Safari, or Edge. The rule specifically targets the Internet Explorer 10 quirk without altering the rendering in contemporary browsers.

How do I add a border back to specific linked images after using Normalize.css?

Apply a more specific CSS rule after including normalize.css. For example, use a > img { border: 2px solid #333; } to add a custom border. Since normalize.css only sets border-style: none, your explicit border declaration will override it through the cascade, restoring the visual boundary while maintaining the IE 10 fix.

Why does Normalize.css use border-style: none instead of border: 0?

The normalize.css source code intentionally uses border-style: none rather than the shorthand border: 0 to minimize its footprint. This approach only removes the border style while leaving other border properties untouched, making it easier for developers to layer on their own border definitions without resetting width, color, or other values simultaneously.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}