Disposition - CSS-tricks | CSS Almanack 2025

Den outlineegendom i CSS ritar en linje runt utsidan av ett element. Det liknar gränsen förutom att:

Det går alltid runt alla sidor, du kan inte specificera specifika sidor
Det är inte en del av boxmodellen, så det påverkar inte elementets position eller intilliggande element (trevligt för felsökning!)

Andra mindre fakta är att den inte respekterar gränsradien (det är vettigt antar jag att det inte är en gräns) och att det inte alltid är rektangulärt. Om konturen går runt ett inbyggt element med olika teckensnittsstorlekar, till exempel, kommer Opera att rita en förskjuten ruta runt det hela.

Den används ofta av tillgänglighetsskäl för att betona en länk när den är flikad till utan att påverka positionering och på ett annat sätt än sväva.

a:focus ( outline: 1px dashed red; )

Stenografi

outline: ( || || ) | inherit

Det tar samma egenskaper som gränsen, men med "kontur-" istället.

Ovanstående stenografi kunde ha skrivits:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Anteckningar

Du kan inte ange en kontur på bara en (eller två eller tre) sidor av ett element. Endast alla sidor. Det finns inget sådant som outline-top, outline-right, outline-bottomeller outline-leftsom det finns med border.
Försök öppna konsolen på vilken webbplats som helst och kör document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- du ser en hel del av webbplatsernas struktur på det sättet.
outlineanvänds för :focusstilar som standard. Kom ihåg att om du någonsin tar bort outlinestilar, till exempel a:focus ( outline: 0; ), måste du lägga till dem igen genom att använda någon annan typ av visuellt distinkt stil.