A propriedade border do tag <img> do HTML
Exemplo
O seguinte HTML pode gerar bordas de imagens de diferentes espessuras:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
Definição e uso
A propriedade border do elemento <img> define a largura da borda ao redor da imagem, o que significa que pode aumentar ou remover a borda da imagem.
Comentário:Por padrão, as imagens não têm borda (a menos que a imagem esteja dentro de um elemento <a>).
Os navegadores geralmente mostram imagens representando hiperligações (por exemplo, imagens contidas dentro de um elemento <a>) dentro de uma borda de dois pixels, para indicar que o leitor pode acessar o documento relacionado ao escolher essa imagem.
Pode usar a propriedade border e um valor de largura em pixels para remover (border="0") ou aumentar a largura da borda da imagem.
Atenção:A propriedade também não é recomendada no HTML 4 e no XHTML, mas ainda é bem suportada pelos navegadores populares.
Suporte do navegador
Embora não seja recomendado usar a propriedade border, todos os navegadores principais suportam essa propriedade.
Dicas e comentários
Comentário:O HTML 4.01 não recomenda usar a propriedade "border" das imagens. No XHTML 1.0 Strict DTD e no HTML 5, essa propriedade não é mais suportada.
Dica:Use Propriedade de borda do CSS para alterar o estilo da borda do elemento. Você pode usar a propriedade de borda do CSS em um estilo externo, para definir uma borda consistente para todas as imagens do site. Comparado a definir a propriedade border para uma única imagem, essa abordagem é sem dúvida mais eficiente.
Comentários de compatibilidade
Não é recomendado usar a propriedade border do elemento img; No HTML 4.01 Strict e no XHTML 1.0 Strict DTD, a propriedade border do elemento img não é suportada.
Use CSS em vez de.
Sintaxe de CSS: <img style="border:5px solid black">
Exemplo de CSS: Borda de imagem
Nossa tutorial de CSS, você pode encontrar mais sobre propriedade border detalhes.
Sintaxe
<img border="value" />
Valor da propriedade
| Valor | Descrição |
|---|---|
| pixels | Largura da borda, em pixels. |
Exemplo TIY
- A propriedade border do elemento <img>
- Este exemplo demonstra como usar a propriedade border do tag <img> para alterar a borda da imagem.
Leia mais: Remover bordas das imagens
Ao usar a propriedade border="0" no tag <img>, você pode remover a borda ao redor do hiperlink de imagem. Para algumas imagens, especialmente mapas de imagem, a ausência de borda pode melhorar a aparência da página. Para botões de imagem que claramente indicam que apontam para outras imagens, sem borda, a imagem pode parecer melhor.
Embora remover as bordas não diminua a acessibilidade do documento, é sempre bom ter cuidado. Sem bordas significa que se removeu uma indicação visual comum de hiperlinks, o que pode fazer com que os leitores não encontrem esses links tão facilmente. Os navegadores geralmente mudam a forma do cursor quando o mouse está sobre uma imagem de hiperlink, mas não pode-se esperar que os navegadores sempre façam isso, e não deve-se permitir que os usuários exploram imagens sem bordas para encontrar esses links ocultos.
Recomendamos fortemente que, ao usar imagens sem bordas, você utilize outros métodos ao mesmo tempo, para que seus leitores saibam que devem clicar nessas imagens. Mesmo com texto simples, é difícil tornar o documento mais acessível para os leitores.
