Proprietà CSS outline-style
La proprietà CSS outline-style specifica lo stile del contorno di un elemento. Scopri i valori e gli esempi.
La proprietà CSS outline-style imposta lo stile della linea del contorno di un elemento — ad esempio una linea solid, dashed o dotted. Un outline è una linea tracciata appena fuori dal bordo dell'elemento, attorno a tutti e quattro i lati contemporaneamente.
Questa pagina spiega come appare ogni stile di contorno, come outline-style differisce da border-style, e mostra esempi eseguibili per ogni valore.
Perché usare un outline?
I contorni vengono usati più spesso per rendere visibile il focus. Quando un utente naviga con la tastiera verso un link, un pulsante o un campo di un modulo, il browser disegna un outline in modo che possa vedere dove si trova. Rimuovere quel contorno senza sostituirlo compromette l'accessibilità da tastiera, quindi è preferibile ridisegnarlo piuttosto che eliminarlo.
L'outline differisce dal border in due modi importanti:
- Non occupa spazio. Il contorno viene disegnato fuori dal bordo e non influisce sul layout, quindi aggiungere o modificare un outline non sposta mai gli elementi circostanti. La width e la height dell'elemento non includono l'outline.
- Non può essere controllato per lato o angolo individuale. A differenza dei border, non è possibile impostare un outline diverso per un solo lato, e un outline di base segue il box, non il suo
border-radius.
Per visualizzare qualsiasi outline, outline-style deve essere impostato su un valore diverso da none — questa proprietà è ciò che "attiva il contorno". Combinarlo con outline-color e outline-width, oppure usare la shorthand outline per impostare tutte e tre insieme.
La proprietà outline-style accetta i seguenti valori:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
I valori groove, ridge, inset e outset creano un effetto 3D ombreggiando il contorno in base a outline-color. L'effetto è più visibile con uno spessore maggiore e un colore di tono medio — è quasi invisibile su nero o bianco puro.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.outlineStyle = "dotted" |
Sintassi
Sintassi CSS di outline-style
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Esempio della proprietà outline-style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
}
.p2 {
outline-style: dashed;
}
.p3 {
outline-style: dotted;
}
.p4 {
outline-style: double;
}
.p5 {
outline-style: none;/*hidden*/
}
.p6 {
outline-style: groove;
outline-color: #ccc;
}
.p7 {
outline-style: ridge;
outline-color: #ccc;
}
.p8 {
outline-style: inset;
outline-color: #ccc;
}
.p9 {
outline-style: outset;
outline-color: #ccc;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="p1">This is a paragraph with outline set to solid.</p>
<p class="p2">This is a paragraph with outline set to dashed.</p>
<p class="p3">This is a paragraph with outline set to dotted.</p>
<p class="p4">This is a paragraph with outline set to double.</p>
<p class="p5">This is a paragraph with outline set to none.</p>
<p class="p6">This is a paragraph with outline set to groove.</p>
<p class="p7">This is a paragraph with outline set to ridge.</p>
<p class="p8">This is a paragraph with outline set to inset.</p>
<p class="p9">This is a paragraph with outline set to outset.</p>
</body>
</html>Risultato
Esempio della proprietà outline-style con tutti i valori:
CSS outline-style another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: 4px dotted gray;
}
p.dashed {
outline: 0.2em dashed rgb(142, 191, 66);
}
p.solid {
outline: 4px solid #ccc;
}
p.double {
outline: 4px double #000;
}
p.groove {
outline: 4px groove #666;
}
p.ridge {
outline: thick ridge #1c87c9;
}
p.inset {
outline: medium inset #1c87c9;
}
p.outset {
outline: 4px outset #1c87c9;
}
</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>
<p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Questo secondo esempio usa la shorthand outline per impostare insieme stile, larghezza e colore — ad esempio outline: 4px dotted gray.
Esempio della proprietà outline-style con il valore "groove":
Example of the outline-style property with the groove value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #7f7fa7;
text-align: center;
outline-width: 8px;
outline-style: groove;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to groove.</p>
</body>
</html>Esempio della proprietà outline-style con il valore "ridge":
Example of the outline-style property with the ridge value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: ridge;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to ridge.</p>
</body>
</html>Esempio della proprietà outline-style con il valore "inset":
Example of the outline-style property with the inset value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: inset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to inset.</p>
</body>
</html>Esempio della proprietà outline-style con il valore "outset":
Example of the outline-style property with the outset value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: outset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to outset.</p>
</body>
</html>Esempio della proprietà outline-style con il valore "dotted":
Example of the outline-style property with the dotted value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dotted;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dotted.</p>
</body>
</html>Esempio della proprietà outline-style con il valore "dashed":
Example of the outline-style property with the dashed value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dashed;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dashed.</p>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| none | Non mostra alcun contorno. Questo è il valore predefinito della proprietà. | Play it » |
| hidden | Uguale a none per i contorni (il valore esiste per coerenza con border-style). | Play it » |
| dotted | Il contorno è specificato come una serie di punti. | Play it » |
| dashed | Il contorno è specificato come una serie di trattini. | Play it » |
| solid | Il contorno è specificato come una linea solida. | Play it » |
| double | Il contorno è specificato come una doppia linea solida. | Play it » |
| groove | Specifica un contorno con effetto scanalato 3D. | Play it » |
| ridge | Specifica un contorno con effetto a rilievo 3D. | Play it » |
| inset | Specifica un contorno incassato. | Play it » |
| outset | Specifica un contorno in rilievo. | Play it » |
| initial | Imposta la proprietà al suo valore predefinito. | Play it » |
| inherit | Eredita la proprietà dall'elemento padre. |
Consigli e problemi comuni
outline-styleda solo potrebbe essere invisibile. Senza larghezza o colore impostati, la larghezza predefinita dell'outline èmediume il colore ècurrentColor, quindi di solito viene visualizzato — ma se si impostaoutline-width: 0non apparirà. Usa la shorthand outline per essere esplicito.- Non eliminare semplicemente gli outline di focus.
outline: nonerimuove l'anello di focus da tastiera. Se un design richiede la sua rimozione, sostituiscilo con un outline personalizzato o uno stile di focusbox-shadowin modo che gli utenti da tastiera possano ancora vedere il focus. - Usa
outline-offsetper dare respiro. Poiché il contorno si trova a filo con il bordo per impostazione predefinita, la proprietàoutline-offsetlo sposta verso l'esterno (o verso l'interno con un valore negativo) senza influire sul layout. - Outline vs. border. Usa un outline quando hai bisogno di un indicatore che non deve cambiare le dimensioni o la posizione del box; usa un border quando la linea fa parte del layout dell'elemento.
Proprietà correlate
- outline — shorthand per
outline-width,outline-styleeoutline-color. - outline-color — imposta il colore del contorno.
- outline-width — imposta lo spessore del contorno.
- border — la controparte che occupa spazio rispetto ai contorni.