border-color
Définit la couleur d’une bordure.
- Valeur initiale
currentcolor- Héritée
- Non
- Animable
- oui, en tant que couleur
- S’applique à
- tous les éléments
- JavaScript
element.style.borderColor = "#f59e0b"
Exemple
#.option {
border: 2px solid transparent;
}
.option:hover {
border-color: #a78bfa;
}<div class="option stage" style="border-radius: 12px; cursor: pointer;">Survolez pour faire apparaître une bordure sans décalage du contenu</div>Définition et utilisation
#La propriété border-color donne sa couleur à la ligne de bordure. Elle accepte tous les formats de couleur CSS : noms, notation hexadécimale, rgb(), hsl() et les espaces colorimétriques plus récents.
Par défaut, la bordure prend la couleur du texte (currentcolor). Ainsi, changer le color d’un élément change aussi la couleur de sa bordure, sauf si elle a été définie séparément.
Vous pouvez indiquer de une à quatre valeurs pour colorer les côtés différemment. La valeur transparent est utile pour réserver de la place à une bordure qui apparaîtra plus tard.
Syntaxe
#border-color: <couleur> (1 à 4 valeurs);Valeurs
#- La couleur du texte de l’élément, ici un bleu ciel issu de la propriété
color. <couleur>
N’importe quelle couleur, ici un ambre.deux valeurs
La première pour le haut et le bas, la seconde pour les côtés.- Une bordure transparente : elle occupe de la place, mais reste invisible.
Valeurs en pratique
#currentcolor
color..demo { border-color: currentcolor; }#f59e0b
.demo { border-color: #f59e0b; }#f43f5e #10b981
.demo { border-color: #f43f5e #10b981; }transparent
.demo { border-color: transparent; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Définissez une bordure transparente au repos, et une couleur seulement au
:hover. Le contenu ne sautera alors plus. - Pour rester cohérent avec votre thème de couleurs, utilisez des variables CSS, par exemple
border-color: var(--border).
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.