Couleur de bordure CSS

Couleur de bordure CSS

border-color Cette propriété est utilisée pour définir la couleur des quatre bords.

La couleur peut être définie de la manière suivante :

  • name - Spécifiez le nom de la couleur, par exemple "red"
  • HEX - Spécifiez une valeur hexadécimale, par exemple "#ff0000"
  • RGB - Spécifiez une valeur RGB, par exemple "rgb(255,0,0)"
  • HSL - Spécifiez une valeur HSL, par exemple "hsl(0, 100%, 50%)"
  • transparent

Commentaire :Si non défini border-colorsi elle n'est pas définie, elle héritera de la couleur de l'élément.

Exemple

Démonstration de différentes couleurs de bord :

p.one {
  border-style: solide;
  border-color: red;
}
p.two {
  border-style: solide;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Résultat :

Bord en ligne continue rouge

Bord en ligne continue verte

Bord en points bleus

Essayez vous-même

Couleur spécifique du bord

border-color Les propriétés peuvent être définies avec un à quatre valeurs (utilisées pour le bord supérieur, le bord droit, le bord inférieur et le bord gauche).

Exemple

p.one {
  border-style: solide;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

Essayez vous-même

Valeurs HEX

La couleur de la bordure peut également être spécifiée en utilisant des valeurs hexadécimales (HEX) :

Exemple

p.one {
  border-style: solide;
  border-color: #ff0000; /* Rouge */
}

Essayez vous-même

Valeurs RGB

Ou utilisez des valeurs RGB :

Exemple

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

Essayez vous-même

Valeurs HSL

Vous pouvez également utiliser des valeurs HSL :

Exemple

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

Essayez vous-même

Vous pouvez essayer Couleurs CSS Vous pouvez en apprendre davantage sur les valeurs HEX, RGB et HSL dans les sections.