# The “border” attribute is obsolete. Consider specifying “img { border: 0; }” in CSS instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-border-attribute-is-obsolete-consider-specifying-img-border-0-in-css-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

In earlier versions of HTML, the `border` attribute on `<img>` was commonly used to control the border width in pixels. Its most frequent use was `border="0"` to suppress the default blue border browsers would render around images wrapped in `<a>` links. While this worked, it mixed presentation with markup — something HTML5 discourages in favor of a clean separation between structure (HTML) and styling (CSS).

The W3C HTML Validator flags this attribute as obsolete because it was removed from the HTML5 specification. Modern browsers still understand it for backward compatibility, but relying on deprecated features is bad practice. It can lead to inconsistencies across browsers, makes your code harder to maintain, and signals to validators and other developers that the markup is outdated.

The recommended approach is to handle image borders entirely in CSS. If you previously used `border="0"` to remove borders from linked images, most modern CSS resets and normalize stylesheets already handle this. If you're not using a reset, a single CSS rule takes care of it globally — no need to repeat the attribute on every `<img>` tag.

## How to fix it

1. **Remove** the `border` attribute from all `<img>` elements.
2. **Add a CSS rule** to achieve the same effect. For removing borders, use `img { border: 0; }` in your stylesheet. For adding a visible border, use properties like `border: 2px solid #333;`.

## Examples

### ❌ Obsolete `border` attribute

```html
<a href="/products">
  <img src="product.jpg" alt="Our product" border="0">
</a>
```

This triggers the validator warning because `border` is no longer a valid attribute on `<img>`.

### ✅ Fixed with CSS (external/internal stylesheet)

```html
<style>
  img {
    border: 0;
  }
</style>

<a href="/products">
  <img src="product.jpg" alt="Our product">
</a>
```

A single rule in your stylesheet removes borders from all images, which is cleaner and easier to maintain than repeating the attribute on every element.

### ✅ Fixed with inline CSS (if needed)

```html
<a href="/products">
  <img src="product.jpg" alt="Our product" style="border: 0;">
</a>
```

Inline styles work but aren't ideal for large-scale fixes. Prefer a stylesheet rule when possible.

### ✅ Adding a decorative border with CSS

If your intent was to *add* a visible border (e.g., `border="2"`), replace it with a more flexible CSS equivalent:

```html
<style>
  .bordered {
    border: 2px solid #333;
  }
</style>

<img src="photo.jpg" alt="A scenic landscape" class="bordered">
```

CSS gives you far more control — you can specify the border style, color, individual sides, and even use `border-radius` for rounded corners, none of which were possible with the old `border` attribute.