Proprietà CSS outline
La proprietà CSS outline è una scorciatoia per outline-width, outline-style e outline-color. Scopri i valori e gli esempi pratici.
Un outline è una linea tracciata attorno a un elemento, appena fuori dal bordo. A differenza di un border, un outline non occupa spazio nel layout ed è uguale su tutti e quattro i lati — non è possibile impostarlo per lato. Questa pagina tratta la proprietà abbreviata outline, le differenze rispetto a un border e la sua importanza per l'accessibilità da tastiera.
La proprietà outline è una scorciatoia che imposta le seguenti proprietà estese in una singola dichiarazione:
- outline-width — lo spessore della linea.
- outline-style — lo stile della linea (
solid,dashed,dotted, …). Obbligatorio affinché l'outline sia visibile. - outline-color — il colore della linea.
- outline-offset — lo spazio tra l'outline e il bordo dell'elemento. (Si imposta separatamente; non fa parte della scorciatoia
outline.)
Lo stile predefinito di outline è none, quindi impostare solo outline-color non produce alcun effetto — è necessario specificare anche uno stile. Poiché gli outline vengono disegnati all'esterno dell'elemento e ignorati dal box model, non spostano il contenuto circostante né modificano le dimensioni di layout dell'elemento.
Outline vs. Border
Un outline e un border si assomigliano, ma si comportano in modo diverso:
- Layout: un border fa parte del box model e spinge il contenuto circostante; un outline viene dipinto sopra e non occupa spazio.
- Lati: i border possono essere stilizzati per lato (
border-top,border-left, …); un outline è sempre uniforme su tutti e quattro i lati. - Forma: nella maggior parte dei browser un outline è strettamente rettangolare e non viene arrotondato da border-radius, anche quando il border lo è.
- Posizione: l'outline viene disegnato all'esterno del bordo, quindi quando un elemento ha entrambi, l'outline si trova oltre il border.
| Valore iniziale | medium none currentcolor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. L'outline dell'elemento è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.outline = "#eee dashed 10px"; |
Sintassi
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Esempio della proprietà outline:
Esempio di codice CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Risultato
Nell'esempio, lo stile outline del primo elemento è dotted e quello del secondo è dashed.
Nell'esempio seguente, il primo elemento non ha un border, mentre il secondo sì. Si noti che l'outline del secondo elemento si trova all'esterno del suo border:
Esempio della proprietà outline con un elemento che ha un border:
Esempio CSS outline e border insieme
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Nell'esempio seguente, l'outline si trova all'esterno del border del secondo elemento.
Esempio della proprietà outline-color con la proprietà outline-style:
Esempio CSS outline con colore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Spaziatura dell'outline con outline-offset
Per impostazione predefinita l'outline aderisce al bordo dell'elemento. La proprietà outline-offset lo allontana (o, con un valore negativo, lo porta all'interno). È una proprietà separata, non parte della scorciatoia outline:
button {
outline: 2px solid #1c87c9;
outline-offset: 4px; /* 4px gap between the border and the outline */
}Outline e accessibilità da tastiera
L'uso più importante degli outline nel mondo reale è l'indicatore di focus. Quando un utente naviga tra gli elementi di una pagina con il tasto Tab, il browser disegna un outline predefinito attorno all'elemento con il focus, in modo che l'utente sappia dove si trova. Rimuoverlo senza sostituirlo è un grave problema di accessibilità:
/* Do NOT do this — keyboard users lose track of focus */
button:focus {
outline: none;
}Se l'anello di focus predefinito non si adatta al tuo design, ridefiniscilo invece di rimuoverlo:
button:focus-visible {
outline: 2px solid #1c87c9;
outline-offset: 2px;
}Questo utilizza lo stato :focus insieme alla moderna pseudo-classe :focus-visible, che mostra l'outline solo per l'interazione da tastiera — in questo modo i clic del mouse non attivano l'anello, mentre gli utenti da tastiera rimangono orientati.
Valori
| Valore | Descrizione |
|---|---|
| outline-width | Definisce la larghezza dell'outline. |
| outline-style | Definisce lo stile dell'outline. |
| outline-color | Imposta il colore dell'outline. |
| outline-offset | Distanzia l'outline dal bordo dell'elemento. |
| initial | Fa usare alla proprietà il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
- outline-style — il componente di stile obbligatorio della scorciatoia.
- outline-width — controlla lo spessore dell'outline.
- outline-color — controlla il colore dell'outline.
- outline-offset — distanzia l'outline dal border.
- border — la controparte del box model che influisce sul layout.