Contorno CSS

Questo elemento ha un bordo nero e un contorno blu, di larghezza 10px.

Contorno CSS

Il contorno è una linea disegnata intorno all'elemento, al di fuori del bordo, per evidenziare l'elemento.

CSS ha i seguenti attributi di contorno:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Attenzione:Contorno conBordoDiverso! La differenza sta nel fatto che il contorno viene disegnato al di fuori del bordo dell'elemento e potrebbe sovrapporsi ad altri contenuti. Allo stesso modo, il contorno non fa parte delle dimensioni dell'elemento; la larghezza e l'altezza totale dell'elemento non sono influenzate dalla larghezza della linea di contorno.

Stile di contorno CSS

L'attributo outline-style specifica lo stile del contorno e può impostare i seguenti valori:

  • dotted - Definire un contorno a punti.
  • dashed - Definire un contorno a linea tratteggiata.
  • solid - Definire un contorno a linea solida.
  • double - Definire un contorno a doppia linea.
  • groove - Definire un contorno 3D in incavo.
  • ridge - Definire un contorno 3D in scanalatura.
  • inset - Definire un contorno 3D in basso.
  • outset - Definire un contorno 3D in rilievo.
  • none - Definire un contorno assente.
  • hidden - Definire il contorno nascosto.

L'esempio seguente mostra diversi valori di outline-style:

Esempio

Esempio di diversi stili di contorno:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Risultato:

Contorno a punti

Contorno a tratteggio

Contorno a linea continua

Contorno a linee twin

Contorno in scanalatura in bassorilievo 3D. Questo effetto dipende dal valore di outline-color.

Contorno in scanalatura 3D. Questo effetto dipende dal valore di outline-color.

Contorno in bassorilievo 3D. Questo effetto dipende dal valore di outline-color.

Contorno in rilievo 3D. Questo effetto dipende dal valore di outline-color.

Prova tu stesso

Attenzione:Salvo che non sia impostato outline-style Se non è impostata l'attributo, nessun altro attributo di contorno (che verranno spiegati nel capitolo successivo) avrà alcun effetto!