Colore del bordo CSS

Colore del bordo CSS

border-color L'attributo viene utilizzato per impostare i colori dei quattro bordi.

Il colore può essere impostato nei seguenti modi:

  • name - Specificare il nome del colore, ad esempio "red"
  • HEX - Specificare un valore esadecimale, ad esempio "#ff0000"
  • RGB - Specificare un valore RGB, ad esempio "rgb(255,0,0)"
  • HSL - Specificare un valore HSL, ad esempio "hsl(0, 100%, 50%)"
  • transparent

Commento:Se non impostato border-colorse non specificato, erediterà il colore dell'elemento.

Esempio

Esempio di diversi colori di bordo:

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:

Bordo a tratteggio rosso

Bordo a tratteggio verde

Bordo a punti blu

Prova personalmente

Colore specifico del bordo

border-color Le proprietà possono essere impostate da uno a quattro valori (usati 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; /* 上红、右绿、下蓝、左黄 */
}

Prova personalmente

Valori HEX

Il colore della cornice può anche essere specificato con valori esadecimali (HEX):

Esempio

p.one {
  border-style: solid;
  border-color: #ff0000; /* Rosso */
}

Prova personalmente

Valori RGB

O usa valori RGB:

Esempio

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* Rosso */
}

Prova personalmente

Valori HSL

Puoi anche usare valori HSL:

Esempio

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* Rosso */
}

Prova personalmente

Puoi provarli sui nostri Colori CSS Impari di più sui valori HEX, RGB e HSL nella sezione.