logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Outline degli elementi con CSS

La proprietà outline in CSS viene utilizzata per disegnare una linea attorno all'esterno di un elemento. È simile alla proprietà border (che abbiamo visto nella lezione dei bordi), ma differisce dal fatto che l'outline non occupa spazio e non influisce sulla dimensione o la posizione dell'elemento.

Esempio di elemento

Per capire in breve come funziona l'outline, prova a cliccare "Outline" qui sopra, poi "Rimuovi". Vedrai che la posizione dell'elemento grigio non è cambiata. Ora, prova a cliccare su "Bordo" e "Rimuovi": noterai la differenza, perché il testo si sarà spostato a causa di border.

In questa lezione, vediamo le proprietà outline-style, outline-width, outline-color, outline e outline-offset.

Lo stile dell'outline

Lo stile dell'outline è definito tramite la proprietà outline-style. Questa proprietà accetta i seguenti valori:

  • none, non è visualizzato nessun outline.
  • hidden, definisce un outline nascosto (invisibile).
  • solid, definisce un outline costituito da una linea continua.
  • dashed, definisce un outline costituito da trattini.
  • dotted, definisce un outline costituito da punti.
  • double, definisce un outline costituito da due linee continue. La larghezza dell'outline (che vedremo più avanti in questa lezione) deve essere almeno 3 pixel per mostrare due linee.
  • groove, definisce un outline incassato, appare come se fosse intagliato nell'elemento.
  • ridge, definisce un outline in rilievo.
  • inset, definisce un outline che appare come se fosse inserito nell'elemento.
  • outset, definisce un outline che appare come se fosse in rilievo rispetto all'elemento.

Vediamo un esempio di un outline formato da linea continua:

<div>Ciao a tutti</div>

<style>
div {
  width: 200px;
  height: 200px;
  outline-style: solid;
}
</style>

Nell'esempio, abbiamo aggiunto height e width (che abbiamo visto nella lezione sulle dimensioni degli elementi) per rendere più visibile il <div>.

Nota: l'outline è un elemento essenziale per rendere accessibile una pagina, in quanto viene utilizzato dagli screen reader (programmi utilizzato dai non vedenti o ipovedenti) per la selezione degli elementi. Non rimuovere l'outline (che in alcune pseudo-classi, che vedremo nella lezione dedicata, sono preimpostate) se non necessario.

Lo spessore dell'outline

La proprietà outline-width in CSS specifica la larghezza/spessore della linea dell'outline di un elemento.

Puoi utilizzare questi valori con outline-width:

  • lunghezza, con un'unità di misura come px, em, ecc.
  • thick, specifica un outline spesso (solitamente corrisponde a circa 5-6 pixel).
  • medium, specifica un outline di larghezza media (solitamente corrisponde a circa 3-4 pixel). È il valore di default.
  • thin, specifica un outline sottile (solitamente corrisponde a circa 1 pixel).

Notaoutline-style è una proprietà obbligatoria da definire per creare l'outline.

Vediamo come creare un outline di 3 px:

<div>Ciao a tutti</div>

<style>
div {
  width: 200px;
  height: 200px;
  outline-style: solid;
  outline-width: 3px;
}
</style>

Il colore dell'outline

Per definire il colore dell'outline di un elemento, possiamo utilizzare outline-color.

Con questa proprietà, possiamo scegliere tra:

Ecco come rendere l'outline rosso:

<div>Ciao a tutti</div>

<style>
div {
  width: 200px;
  height: 200px;
  outline-style: solid;
  outline-width: 3px;
  outline-color: red;
}
</style>

La proprietà outline

Con la proprietà outline, è possibile specificare tutte le diverse proprietà che abbiamo visto finora in un unico passaggio. Ecco la sintassi di outline:

outline: outline-width outline-style outline-color

Ricorda che outline-style è sempre obbligatorio, mentre lo spessore e il colore sono facoltativi.

Vediamo un esempio con un outline di 3px e rosso:

<div>Ciao a tutti</div>

<style>
div {
  width: 200px;
  height: 200px;
  outline: 3px solid red;
}
</style>

La proprietà outline-offset

La proprietà outline-offset in CSS specifica la distanza tra l'outline e il bordo dell'elemento. Questa proprietà permette di spostare l'outline all'esterno dell'elemento (se usi valori positivi) o all'interno dell'elemento (se usi valori negativi).

La proprietà outline-offset accetta qualsiasi valore di lunghezza: px, em, ecc.

<div>Ciao a tutti</div>

<style>
div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: 10px;
}
</style>

Nell'esempio, abbiamo inserito i bordi per evidenziare il confine dell'elemento.

Prova!Completa gli spazi vuoti con il testo appropriato.
/* Crea un outline di 3px rosso */
div {
  : solid red;
}

Prova!Scegli l'opzione corretta tra quelle elencate.
/* Definisci un outline tratteggiato (con linee) */
outline-style: ___________;
outline-width: 3px;