HTML <img>-taggets border-attribut

HTML <img> etikett

Exempel

Följande HTML kan generera olika tjocka bildkanter:

<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>

Prova själv

Definition och användning

border-egenskapen för tagget <img> specificerar bredden på ramen runt bilden, vilket innebär att du kan lägga till eller ta bort ramen runt bilden.

Kommentarer:Som standard har bilder ingen ram (utom om bilden är inuti ett a-element).

Webbläsare visar vanligtvis bilder som representerar hyperlänkar (t.ex. bilder innehållna i <a>-taggen) inom en ram på två pixlar för att visa att läsaren kan välja denna bild för att komma åt den relaterade dokumenten.

Genom att använda border-egenskapen och en bredd i pixlar kan du ta bort (border="0") eller öka bildens ram.

Observera:Denna egenskap rekommenderas inte längre i HTML 4 och XHTML, och bör ersättas av stil, men den stöds fortfarande bra av populära webbläsare.

Läs mer: Ta bort bildens kanter

Webbläsarstöd

Trots att det inte rekommenderas att använda border-egenskapen, stöds denna egenskap av alla ledande webbläsare.

Tips och kommentarer

Kommentarer:HTML 4.01 rekommenderar inte användning av "border"-egenskapen för bilder. I XHTML 1.0 Strict DTD och HTML 5 stöds inte denna egenskap längre.

Tips:Använd CSS-ramegenskaper För att ändra elementets ramstil. Du kan använda CSS-ramegenskaper i en extern stiltabell för att sätta en enhetlig ram för alla bilder på din webbplats. Denna metod är definitivt mer effektiv än att sätta ram för varje enskild bild.

Kompatibilitetskommentarer

Det rekommenderas inte att använda img-elementets border-egenskap; i HTML 4.01 Strict och XHTML 1.0 Strict DTD stöds inte img-elementets border-egenskap.

Använd CSS istället.

CSS-syntax: <img style="border:5px solid black">

CSS-exempel: Bildram

I vår CSS-lärplattform kan du hitta mer information om border-egenskapen detaljer.

Syntax

<img border="value" />

Egenskapsvärde

Värde Beskrivning
pixels Bredd på ramen, i pixlar.

TIY-exempel

Tagget <img> egenskapen border
Detta exempel visar hur man använder border-egenskapen i <img>-etiketten för att ändra bildens kant.

Läs mer: Ta bort bildens kanter

Genom att använda border="0"-egenskapen i <img>-etiketten kan du ta bort kanterna runt en bildhyperlänk. För vissa bilder, särskilt de som är bildkartsbaserade, kan borttagningen av kanterna förbättra sidans utseende. För länknappar som tydligt visar att de pekar på andra bilder, kan det vara bättre att ha inga kanter.

Även om borttagningen av kanterna inte minskar dokumentets användbarhet, bör du vara försiktig. Eftersom det innebär att du tar bort en mycket vanlig visuell indikation för hyperlänkar, vilket kan göra det svårare för läsarna att hitta dessa länkar. Browsrar ändrar vanligtvis pekarens form när den flyttas över en hyperlänk, men man kan inte förvänta sig att detta alltid händer, och det är ännu sämre att låta användare leta efter dolda länkar på bilder utan kanter.

Vi rekommenderar starkt att du använder andra metoder tillsammans med oframarkeringar av bilder, så att dina läsare vet att de bör klicka på dessa bilder. Även om det är svårt att göra dokumentet mer tillgängligt för läsarna med endast enkel text, är det viktigt att tänka på detta.

HTML <img> etikett