Overzicht - CSS-trucs | CSS Almanac 2025

De outlineeigenschap in CSS trekt een lijn rond de buitenkant van een element. Het lijkt op rand, behalve dat:

Het gaat altijd langs alle kanten, je kunt geen specifieke kanten specificeren
Het maakt geen deel uit van het boxmodel, dus het heeft geen invloed op de positie van het element of aangrenzende elementen (handig voor foutopsporing!)

Andere kleine feiten zijn onder meer dat het de grensradius niet respecteert (is logisch, denk ik omdat het geen grens is) en dat het niet altijd rechthoekig is. Als de omtrek bijvoorbeeld om een inline-element met verschillende lettergroottes gaat, tekent Opera er een verspringend kader omheen.

Het wordt vaak gebruikt om toegankelijkheidsredenen, om een link te benadrukken wanneer er naar wordt getabd zonder de positionering te beïnvloeden en op een andere manier dan zweven.

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

Steno

outline: ( || || ) | inherit

Het heeft dezelfde eigenschappen als border, maar in plaats daarvan met "outline-".

De bovenstaande steno had kunnen worden geschreven:

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

Opmerkingen

U kunt geen omtrek instellen op slechts één (of twee of drie) zijden van een element. Alleen alle kanten. Er is niet zoiets als outline-top, outline-right, outline-bottomof outline-leftals er bij border.
Probeer de console op elke website te openen en te starten document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- u zult zien dat veel van de sites op die manier worden gestructureerd.
outlinewordt standaard gebruikt voor :focusstijlen. Onthoud dat als u ooit outlinestijlen verwijdert , zoals a:focus ( outline: 0; ), u ze opnieuw moet toevoegen door een ander soort visueel onderscheidende stijl te gebruiken.