CSS Couleur de Bordure
Couleur de Bordure CSS
La propriété border-color est utilisée pour définir la couleur des quatre bordures.
La couleur peut être définie de plusieurs manières :
- nom - spécifiez un nom de couleur, comme "rouge"
- HEX - spécifiez une valeur HEX, comme "#ff0000"
- RGB - spécifiez une valeur RGB, comme "rgb(255,0,0)"
- HSL - spécifiez une valeur HSL, comme "hsl(0, 100%, 50%)"
- transparent
Remarque : Si border-color n'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 :
Bordure rouge
Bordure verte
Bordure bleue
Couleurs de Bordure Spécifiques
La propriété border-color 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; /* rouge en haut, vert à droite, bleu en bas et jaune à gauche */
} Valeurs HEX
La couleur de la bordure peut également être spécifiée en utilisant une valeur hexadécimale (HEX) :
Exemple
p.one {
border-style: solid;
border-color: #ff0000; /* rouge */
} Valeurs RGB
Ou en utilisant des valeurs RGB :
Exemple
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* rouge */
} Valeurs HSL
Vous pouvez également utiliser des valeurs HSL :
Exemple
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* rouge */
} Vous pouvez en apprendre davantage sur les valeurs HEX, RGB et HSL dans nos chapitres Couleurs CSS .