Colore bordo CSS
Colore bordo CSS
La border-colorproprietà viene utilizzata per impostare il colore dei quattro bordi.
Il colore può essere impostato da:
- nome - specifica un nome di colore, come "rosso"
- HEX: specifica un valore HEX, come "#ff0000"
- RGB - specifica un valore RGB, come "rgb(255,0,0)"
- HSL: specifica un valore HSL, ad esempio "hsl(0, 100%, 50%)"
- trasparente
Nota: se border-colornon è impostato, eredita il colore dell'elemento.
Esempio
Dimostrazione dei diversi colori dei bordi:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Risultato:
Red border
Green border
Blue border
Colori laterali specifici
La border-colorproprietà può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).
Esempio
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Valori esadecimali
Il colore del bordo può anche essere specificato utilizzando un valore esadecimale (HEX):
Esempio
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Valori RGB
Oppure utilizzando i valori RGB:
Esempio
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Valori HSL
Puoi anche utilizzare i valori HSL:
Esempio
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
Puoi saperne di più sui valori HEX, RGB e HSL nei nostri capitoli CSS Colors .