Propriété CSS border-top-width
La propriété border-top-width permet de définir la largeur de la bordure supérieure d'un élément.
La largeur de la bordure supérieure, ainsi que celle de tous les autres côtés, peut être définie à l'aide des propriétés raccourcies border ou border-width.
Pour appliquer border-top-width, vous devez d'abord définir un style de bordure à l'aide de border-style ou border-top-style. La propriété ne prend effet que lorsque le style de bordure n'est pas none ou hidden.
INFO
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils suivent toujours l'ordre suivant : thin ≤ medium ≤ thick.
INFO
La spécification ne définit pas comment les bordures de styles et de largeurs différents se connectent dans les coins.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. La largeur de la bordure est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderTopWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS border-top-width
border-top-width: medium | thin | thick | length | initial | inherit;Exemple de la propriété border-top-width :
Exemple de la propriété CSS border-top-width avec la valeur thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
border-style: dotted;
border-top-width: thick;
}
</style>
</head>
<body>
<h2>Border-top-width example</h2>
<p>As you can see the width of the top border is set to thick.</p>
</body>
</html>Résultat
Exemple de la propriété border-top-width avec toutes les valeurs :
Exemple de la propriété CSS border-top-width avec les valeurs medium, thin, thick, initial et inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-width example classes */
.b1 {
border-top-width: medium;
}
.b2 {
border-top-width: thin;
}
.b3 {
border-top-width: thick;
}
.b4 {
border-top-width: 10px;
}
.b5 {
border-top-width: initial;
}
.b6 {
border-top-width: inherit;
}
</style>
</head>
<body>
<h1>Border-top-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| medium | Définit une bordure supérieure de taille moyenne. C'est la valeur par défaut de cette propriété. | Tester » |
| thin | Définit une bordure supérieure fine. Il appartient au navigateur de déterminer la largeur exacte. | Tester » |
| thick | Définit une bordure supérieure épaisse. Il appartient au navigateur de déterminer la largeur exacte. | Tester » |
| length | Définit la longueur d'épaisseur de la bordure supérieure (ex. : 10px, 5em, 8pt). Les valeurs en pourcentage ne sont pas prises en charge. | Tester » |
| initial | Réinitialise la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite de la propriété de l'élément parent. |
Pratique
Quelles sont les valeurs valides pour la propriété border-top-width en CSS ?