Proprietà CSS border-color
La proprietà CSS border-color applica il colore ai quattro lati di un elemento. Scopri i valori e prova gli esempi.
La proprietà CSS border-color imposta il colore del bordo di un elemento. È una proprietà shorthand che consente di impostare il colore di tutti e quattro i lati contemporaneamente, oppure assegnare a ciascun lato il proprio colore. Corrisponde alle quattro proprietà longhand:
Questa pagina tratta la sintassi, le forme da uno a quattro valori, i formati di colore accettati e i problemi che rendono un colore di bordo invisibile senza alcun messaggio di errore.
Quando il colore viene visualizzato
border-color colora un bordo solo se esiste effettivamente un bordo da colorare. Il colore viene utilizzato insieme alle proprietà border-style e border-width. Il bordo rimane invisibile se:
border-styleènoneohidden(il valore predefinito ènone), oppureborder-widthè0.
In altre parole, impostare border-color da solo non produce alcun effetto — è sempre necessario uno stile. La maggior parte degli sviluppatori imposta tutti e tre i valori contemporaneamente usando la proprietà shorthand border.
Questa proprietà accetta qualsiasi valore CSS color. Il valore predefinito è currentColor, il che significa che il bordo eredita il valore color dell'elemento a meno che non venga sovrascritto.
Le forme da uno a quattro valori
border-color segue il pattern standard CSS per le shorthand sui lati, quindi il numero di valori passati determina a quali lati vengono applicati:
| Valori | alto | destra | basso | sinistra |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Un modo pratico per ricordare l'ordine dei quattro valori è "in senso orario dall'alto": alto, destra, basso, sinistra.
Riepilogo della proprietà
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditata | No. |
| Animabile | Sì. I bordi del box sono animabili. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderColor = "red"; |
Sintassi
Sintassi della proprietà CSS border-color
border-color: color | transparent | initial | inherit;Esempi
Un singolo colore per tutti i lati
Quando si passa un solo valore, esso imposta il colore di tutti e quattro i lati dell'elemento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Risultato
Un colore diverso per ogni lato
Qui vengono applicati quattro valori: il primo al bordo superiore, il secondo a quello destro, il terzo a quello inferiore e il quarto a quello sinistro.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Utilizzo di diversi formati di colore
È possibile impostare un colore esadecimale, RGB, RGBA, HSL, HSLA o un colore denominato come valore di border-color. L'esempio seguente ne usa uno per ciascun tipo.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Scopri di più sui formati di colore supportati da CSS in HTML Colors.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| color | Imposta un colore per i bordi. Il colore predefinito è il colore corrente dell'elemento. È possibile usare nomi di colori, codici esadecimali, rgb(), rgba(), hsl(), hsla(). Facoltativo. Il valore predefinito è currentColor. | Prova » |
| transparent | Rende il colore del bordo trasparente. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |