Proprietà border del tag HTML <img>
Esempio
Il seguente HTML può generare bordi di immagine con diverse spessori:
<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>
Definizione e uso
L'attributo border del tag <img> specifica la larghezza del bordo intorno all'immagine, il che significa che puoi aggiungere o rimuovere il bordo dell'immagine.
Nota:Per default, le immagini non hanno bordi (a meno che l'immagine sia all'interno di un elemento <a>).
Di solito, i browser mostrano le immagini che rappresentano collegamenti ipertestuali (ad esempio, immagini contenute nel tag <a>) all'interno di un bordo di due pixel, per indicare che è possibile selezionare l'immagine per accedere al documento associato.
Puoi rimuovere o allargare il bordo dell'immagine utilizzando l'attributo border e un valore di larghezza espresso in pixel (border="0") o (border="larghezza in pixel").
Attenzione:L'attributo non è più consigliato in HTML 4 e XHTML, ma è comunque supportato bene dai browser popolari.
Supporto del browser
Nonostante non si consiglia l'uso dell'attributo border, tutti i browser principali lo supportano.
Suggerimenti e commenti
Nota:HTML 4.01 non consiglia l'uso dell'attributo "border" delle immagini. In XHTML 1.0 Strict DTD e HTML 5, l'attributo non è più supportato.
Suggerimento:Usa Attributi di bordo CSS Per modificare lo stile del bordo dell'elemento. Puoi usare un foglio di stile esterno per impostare un bordo uniforme per tutte le immagini del sito. Questo metodo è sicuramente più efficiente rispetto a impostare il bordo per ogni immagine singolarmente.
Commenti sulla compatibilità
Non si consiglia l'uso dell'attributo border dell'elemento img; in HTML 4.01 Strict e XHTML 1.0 Strict DTD, l'attributo border dell'elemento img non è supportato.
Usa CSS invece.
Sintassi CSS: <img style="border:5px solid black">
Esempio CSS: Bordo dell'immagine
Nel nostro tutorial CSS, puoi trovare ulteriori informazioni su Attributo border dettagli.
Sintassi
<img border="value" />
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| pixels | Larghezza del bordo, in pixel. |
Esempio TIY
- Attributo border del tag <img>
- Questo esempio mostra come utilizzare l'attributo border del tag <img> per modificare i bordi dell'immagine.
Leggi di più: Rimozione dei bordi delle immagini
Utilizzando l'attributo border="0" nel tag <img>, è possibile rimuovere i bordi intorno all'hyperlink dell'immagine. Per alcune immagini, in particolare quelle delle mappe di immagini, la mancanza di bordi potrebbe migliorare l'aspetto della pagina. Per quei pulsanti chiaramente destinati a indicare un altro collegamento all'immagine, senza bordi, l'immagine potrebbe sembrare migliore.
Sebbene rimuovere i bordi non riduca la accessibilità del documento, è sempre meglio fare attenzione. Poiché la mancanza di bordi significa che viene rimosso un'indicazione visiva comune per i collegamenti ipertestuali, il lettore potrebbe non trovare questi collegamenti così facilmente come prima. I browser di solito cambiano la forma del puntatore del mouse quando si passa sopra un'immagine ipertestuale, ma non si può contare su questo e tanto meno si dovrebbe lasciare gli utenti a cercare tra immagini senza bordi per trovare quei collegamenti nascosti.
Raccomandiamo vivamente di utilizzare altri metodi insieme all'uso di immagini senza bordi, in modo che i lettori sappiano cliccare su queste immagini. Anche con testi semplici, è difficile rendere un documento più accessibile per i lettori.
