Propriété CSS border-top-color
La propriété border-top-color définit la couleur de la bordure supérieure d'un élément.
La couleur de la bordure supérieure, combiné avec les couleurs des bordures droites, gauches et inférieures, peuvent également être définies à l'aide de la propriété raccourcie border color.
Si vous utilisez la propriété border-top-color, vous devez premièrement définir les propriétés border-style ou border-top-style et ensuite changer la couleur du style défini.
La largeur initiale de la bordure est moyenne. Vous pouvez spécifier la largeur en utilisant les propriétés border-width ou border-top-width.
| Valeur Initiale | currentColor |
| Appliquée à | Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter. |
| Héritée | Non |
| Animable | Oui. La couleur de la bordure supérieure est animable. |
| Vérsion | CSS1 |
| Syntaxe DOM | object.style.borderTopColor = "black"; |
Syntaxe
border-top-color: color | transparent | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<h2> Exemple de border-top-color</h2>
<div>Exemple de la propriété border-top-color avec la couleur différente de la bordure supérieure.</div>
</body>
</html>Voyons un autre exemple, où la valeur est définie à transparent pour la bordure supérieure.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
h2 {
padding-bottom: 8px;
text-align: center;
border: 12px groove #1c87c9;
border-top-color: transparent;
}
</style>
</head>
<body>
<h2>Un titre avec une bordure supérieure transparent.</h2>
</body>
</html>Voyons un exemple CSS border-top-color où la valeur est une couleur nommée:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: darkred;
}
</style>
</head>
<body>
<div>La propriété border-top-color avec la valeur qui est une couleur nommée.</div>
</body>
</html>Voyons un exemple, où on a défini la couleur hexadecimale pour la propriété border-top-color :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<div> La propriété border-top-color avec une valeur hexadecimale.</div>
</body>
</html>Maintenant considérons un exemple avec la propriété border-top-color en utilisant une valeur RGB :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>La propriété border-top-color avec une valeur RGB.</div>
</body>
</html>Voyons un exemple de la propriété border-top-color en utilisant une valeur HSL :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: hsl(24, 80%, 50%);
}
</style>
</head>
<body>
<div>La propriété order-top-color avec une valeur HSL.</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| color |
Définit la couleur de la bordure supérieure. La couleur par défaut est la couleur de l'élément actuel. Les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur requise. |
| transparent | Applique une couleur transparent à une bordure supérieure. La bordure supérieure occupera l'espace définie par la valeur border-width . |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Pratiquez vos connaissances
