Proprietà CSS outline-color
La proprietà CSS outline-color imposta il colore del contorno di un elemento. Scopri i valori e gli esempi.
La proprietà CSS outline-color imposta il colore del contorno di un elemento — la linea tracciata appena all'esterno del bordo.
Un contorno è simile a un border, ma con due differenze importanti:
- Non occupa spazio. La width e l'height di un elemento non includono il contorno, quindi aggiungere o modificare un contorno non sposta mai il layout circostante (a differenza di un border, che fa parte del box model).
- Non può avere lati individuali. Un contorno avvolge l'intero elemento in una volta; non è possibile impostare un colore diverso solo in alto o a sinistra, come si può fare con border-color.
Poiché i contorni si trovano al di fuori del box e non modificano il flusso della pagina, sono il metodo standard per mostrare il focus da tastiera. Quando un utente si sposta tra link, pulsanti e campi del modulo con il tasto Tab, il browser disegna un contorno di focus affinché l'utente possa vedere dove si trova. Questo rende outline-color prima di tutto uno strumento di accessibilità e poi uno decorativo — fare attenzione prima di rimuovere o nascondere i contorni di focus.
Perché usare outline-color
outline-color viene principalmente usato per:
- Stilizzare gli stati di focus — assegnare a
:focuso:focus-visibleun colore di contorno ad alto contrasto e in linea con il brand, invece del valore predefinito del browser. - Evidenziare un elemento senza modificarne le dimensioni o spostare gli elementi vicini.
- Debug del layout — un contorno luminoso temporaneo mostra l'estensione esatta di un elemento senza influenzare il box model.
outline-color non ha effetto visibile da solo. Un contorno viene renderizzato solo quando ha anche uno stile, quindi abbinarlo alla scorciatoia outline o alla proprietà outline-style è necessario (il suo stile predefinito è none).
Valori di colore accettati
È possibile impostare il colore del contorno con qualsiasi colore CSS standard: un nome di colore (red), un codice esadecimale (#1c87c9), o le notazioni funzionali rgb(), rgba(), hsl() e hsla(). La parola chiave currentColor è anche utile — fa sì che il contorno corrisponda al color del testo dell'elemento. Per l'elenco completo dei formati di colore, consulta la sezione colori HTML.
| Valore iniziale | invert |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | Sì. Il colore è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.outlineColor = "#8ebf42"; |
Sintassi
Sintassi CSS outline-color
outline-color: invert | color | initial | inherit;Esempio della proprietà outline-color:
Esempio di codice CSS outline-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p>Invert default value is applied.</p>
</body>
</html>Risultato
Esempio della proprietà outline-color con colori esadecimali, RGB, RGBA, HSL, HSLA:
Esempio CSS outline-color con tutti i valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-color: #1c87c9;
}
.p2 {
outline-style: solid;
outline-color: hsl(65, 100%, 50%);
}
.p3 {
outline-style: solid;
outline-color: hsla(84, 49%, 50%, 1);
}
.p4 {
outline-style: solid;
outline-color: rgb( 224, 0, 0);
}
.p5 {
outline-style: solid;
outline-color: rgba(204, 204, 204, 1);
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p class="p1">This is a paragraph with hexadecimal blue outline.</p>
<p class="p2">This is a paragraph with hsl yellow outline.</p>
<p class="p3">This is a paragraph with hsla green outline.</p>
<p class="p4">This is a paragraph with rgb red outline.</p>
<p class="p5">This is a paragraph with rgba grey outline.</p>
</body>
</html>Ogni paragrafo mantiene il layout identico agli altri — cambia solo il colore del contorno — perché il contorno si trova al di fuori del box e non aggiunge larghezza né altezza.
Esempio di stilizzazione di un contorno di focus:
L'uso più comune di outline-color nella pratica è rendere il focus da tastiera visibile e in linea con il brand. Qui un link ottiene un contorno di focus blu spesso al posto del valore predefinito del browser:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:focus-visible {
outline-style: solid;
outline-width: 3px;
outline-color: #1c87c9;
outline-offset: 2px;
}
</style>
</head>
<body>
<h2>Focus outline example</h2>
<p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
<a href="#">Focus me with the keyboard</a>
</body>
</html>La proprietà outline-offset sposta il contorno di alcuni pixel dall'elemento in modo che non tocchi il testo. Usare :focus-visible anziché :focus fa sì che il contorno appaia per gli utenti da tastiera ma non ai clic del mouse.
Evitare outline: none o outline-color: transparent sugli elementi focalizzabili a meno che non si sostituisca l'indicatore di focus con qualcosa di ugualmente visibile. Rimuoverlo rende la pagina inutilizzabile per gli utenti che utilizzano solo la tastiera.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| invert | Inverte qualsiasi colore applicato allo sfondo. Questo valore garantisce la visibilità del contorno indipendentemente dal colore di sfondo. È il valore predefinito di questa proprietà. | Prova » |
| color | Definisce il colore del contorno. È possibile usare nomi di colori, codici esadecimali, rgb(), rgba(), hsl(), hsla() o la parola chiave currentColor. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
outline-color è una delle tre proprietà longhand che compongono la scorciatoia outline:
- outline-style — imposta lo stile della linea (
solid,dashed,double, …). Necessaria affinché il contorno sia visibile. - outline-width — imposta lo spessore della linea.
- outline-offset — imposta lo spazio tra il contorno e il bordo dell'elemento.
Scrivere outline: 3px solid #1c87c9; è una scorciatoia per impostare contemporaneamente larghezza, stile e colore.