Contorno - Trucchi CSS | CSS Almanac 2025

La outlineproprietà in CSS traccia una linea attorno all'esterno di un elemento. È simile al bordo tranne che:

Gira sempre su tutti i lati, non puoi specificare lati particolari
Non fa parte del box model, quindi non influenzerà la posizione dell'elemento o degli elementi adiacenti (bello per il debug!)

Altri fatti minori includono che non rispetta il raggio del bordo (suppongo abbia senso dato che non è un bordo) e che non è sempre rettangolare. Se il contorno gira attorno a un elemento in linea con caratteri di dimensioni diverse, ad esempio, Opera disegnerà un riquadro sfalsato attorno a tutto.

Viene spesso utilizzato per motivi di accessibilità, per enfatizzare un collegamento quando viene visualizzato con scheda senza influire sul posizionamento e in un modo diverso dal passaggio del mouse.

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

Abbreviazione

outline: ( || || ) | inherit

Assume le stesse proprietà di border, ma invece con "outline-".

La stenografia sopra potrebbe essere stata scritta:

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

Appunti

Non è possibile impostare un contorno solo su uno (o due o tre) lati di un elemento. Solo tutti i lati. Non v'è alcuna cosa come outline-top, outline-right, outline-bottom, o outline-leftcome non c'è con border.
Prova ad aprire la console su qualsiasi sito Web e in esecuzione document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");: vedrai molti siti strutturati in questo modo.
outlineviene utilizzato per gli :focusstili per impostazione predefinita. Ricorda se rimuovi outlinestili, ad esempio a:focus ( outline: 0; ), devi aggiungerli di nuovo usando un altro tipo di stile visivamente distinto.