Couleur de bordure CSS
Couleur de bordure CSS
La border-colorpropriété est utilisée pour définir la couleur des quatre bordures.
La couleur peut être définie par :
- name - spécifiez un nom de couleur, comme "rouge"
- HEX - spécifiez une valeur HEX, comme "#ff0000"
- RVB - spécifiez une valeur RVB, comme "rgb(255,0,0)"
- HSL - spécifiez une valeur HSL, comme "hsl(0, 100%, 50%)"
- transparent
Remarque : Si border-colorn'est pas défini, il hérite de la couleur de l'élément.
Exemple
Démonstration des différentes couleurs de bordure :
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Résultat:
Red border
Green border
Blue border
Couleurs latérales spécifiques
La border-colorpropriété peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).
Exemple
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Valeurs HEX
La couleur de la bordure peut également être spécifiée à l'aide d'une valeur hexadécimale (HEX) :
Exemple
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Valeurs RVB
Ou en utilisant les valeurs RVB :
Exemple
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Valeurs HSL
Vous pouvez également utiliser les valeurs HSL :
Exemple
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
Vous pouvez en savoir plus sur les valeurs HEX, RVB et HSL dans nos chapitres sur les couleurs CSS .