CSS outline
La proprietà CSS outline imposta un contorno attorno all'elemento (CSS3)
La proprietà outline
permette di definire in una singola dichiarazione il colore, lo stile e la larghezza del contorno esterno di un elemento. A differenza dei bordi, il contorno non influisce sulla posizione degli altri elementi e può risultare utile per evidenziare elementi al focus.
Sintassi
Significato dei valori principali:
-
outline-color: definisce il colore del contorno. Accetta valori di colore CSS validi come
red
,#ff0000
,rgb(255,0,0)
, ecc. -
outline-style: definisce lo stile del contorno. Valori comuni:
solid
,dashed
,dotted
,double
,none
. -
outline-width: definisce la larghezza del contorno. Può essere specificata in
px
,em
,rem
, ecc., oppure usare parole chiave comethin
,medium
,thick
.
Esempio proprietà: outline
Codice Esempio: outline

.outline-example {
width: 300px;
height: 150px;
outline: 4px dashed #007acc; /* Outline blu tratteggiato */
padding: 20px;
background-color: #f0f0f0;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
Contenuto Esempio: outline
Esempio di utilizzo di outline
In questo esempio, la proprietà outline
viene usata per creare un contorno blu tratteggiato attorno a un elemento con bordo rosso.
CSS e HTML per l'elemento con contorno:
<style>
.outline-example {
width: 300px;
height: 150px;
outline: 4px dashed #007acc; /* Outline blu tratteggiato */
border: 4px solid red; /* Bordo rosso */
padding: 20px;
background-color: #ffff;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
</style>
<div class="outline-example">
Elemento con contorno (outline) visibile
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.