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

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 navegadores renderizariam ao redor de imagens envolvidas em links <a>. Embora isso funcionasse, misturava apresentação com marcação — algo que o HTML5 desencoraja em favor de uma separação limpa entre estrutura (HTML) e estilo (CSS).

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

A abordagem recomendada é lidar com bordas de imagens inteiramente em CSS. Se você anteriormente usava border="0" para remover bordas de imagens com links, a maioria dos resets CSS modernos e folhas de estilo normalize já lidam com isso. Se você 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 folha de estilos. 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>

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

✅ Corrigido com CSS (folha de estilos externa/interna)

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

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

Uma única regra na sua folha de estilos remove bordas de todas as imagens, o que é mais limpo e mais 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 larga escala. Prefira uma regra de folha de estilos quando possível.

✅ Adicionar uma borda decorativa com CSS

Se a sua intenção era adicionar uma borda visível (por exemplo, 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">

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