Verificação HTML: O atributo "border" está obsoleto. Considere especificar "img { border: 0; }" no CSS.

Sobre este problema HTML

Em versões anteriores do HTML, o atributo border em <img> era comumente usado para controlar a largura da borda em pixels. O seu uso mais frequente era border="0" para suprimir a borda azul padrão que os browsers renderizavam ao redor de imagens envolvidas em links <a>. Embora funcionasse, misturava apresentação com marcação — algo que o HTML5 desencoraja em favor de uma separação limpa entre estrutura (HTML) e estilização (CSS).

O Validador HTML da W3C marca este atributo como obsoleto porque foi removido da especificação HTML5. Os browsers modernos ainda o compreendem para compatibilidade com versões anteriores, mas depender de funcionalidades obsoletas é uma má prática. Pode levar a inconsistências entre browsers, torna o seu código mais difícil de manter, e sinaliza aos validadores e outros programadores que a marcação está desatualizada.

A abordagem recomendada é lidar com bordas de imagem inteiramente no CSS. Se anteriormente usava border="0" para remover bordas de imagens com links, a maioria dos resets CSS modernos e stylesheets normalize já lidam com isso. Se não está a usar um reset, uma única regra CSS resolve isso globalmente — não há necessidade de repetir o atributo em cada tag <img>.

Como corrigir

Remova o atributo border de todos os elementos <img>.
Adicione uma regra CSS para obter o mesmo efeito. Para remover bordas, use img { border: 0; } na sua stylesheet. Para adicionar uma borda visível, use propriedades como border: 2px solid #333;.

Exemplos

❌ Atributo `border` obsoleto

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

Isto desencadeia o aviso do validador porque border já não é um atributo válido em <img>.

✅ Corrigido com CSS (stylesheet externa/interna)

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

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

Uma única regra na sua stylesheet remove bordas de todas as imagens, o que é mais limpo e fácil de manter do que repetir o atributo em cada elemento.

✅ Corrigido com CSS inline (se necessário)

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

Estilos inline funcionam mas não são ideais para correções em grande escala. Prefira uma regra de stylesheet quando possível.

✅ Adicionar uma borda decorativa com CSS

Se a sua intenção era adicionar uma borda visível (p.ex., border="2"), substitua-a por um equivalente CSS mais flexível:

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

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

O CSS dá-lhe muito mais controlo — pode especificar o estilo da borda, cor, lados individuais, e até usar border-radius para cantos arredondados, nada do que era possível com o antigo atributo border.