Propriété CSS border-top-style
La propriété CSS border-top-style permet de définir le style de la bordure supérieure d'un élément.
Cette propriété est spécifiée sous la forme d'un mot-clé unique choisi parmi ceux disponibles pour la propriété border-style. La propriété border-style permet de définir le style pour les quatre côtés d'un élément, tandis que border-top-style définit un style uniquement pour la bordure supérieure.
La largeur par défaut de la bordure supérieure est medium. Elle peut être modifiée en utilisant soit la propriété border-top-width, soit la propriété border-width.
Tous les navigateurs ne rendent pas les styles de la même manière. Chrome affiche les points sous forme de rectangles, et non de cercles.
INFO
La spécification ne précise pas la quantité d'espacement entre les points et les tirets.
INFO
La spécification ne définit pas comment les bordures de styles différents se connectent dans les coins.
| Valeur par défaut | none |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Non |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderTopStyle = "dashed"; |
Syntaxe
Syntaxe de la propriété CSS border-top-style
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété border-top-style :
Exemple de la propriété CSS border-top-style avec les valeurs dashed et dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2,
p {
padding: 15px;
border: solid #666;
}
h2 {
border-top-style: dashed;
}
p {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with dashed border-top-style.</h2>
<p>A paragraph with dotted border-top-style.</p>
</body>
</html>INFO
En fonction de la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent être modifiés.
Résultat
Exemple de la propriété border-top-style avec toutes les valeurs de style :
Exemple de la propriété CSS border-top-style avec les valeurs hidden, dotted, dashed, solid, double, groove, ridge, inset et outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #1c87c9;
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;
background-color: #c9c5c5;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-style example classes */
.b1 {
border-top-style: hidden;
}
.b2 {
border-top-style: dotted;
}
.b3 {
border-top-style: dashed;
}
.b4 {
border-top-style: solid;
}
.b5 {
border-top-style: double;
}
.b6 {
border-top-style: groove;
}
.b7 {
border-top-style: ridge;
}
.b8 {
border-top-style: inset;
}
.b9 {
border-top-style: outset;
}
</style>
</head>
<body>
<h1>Border-top-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| none | Définit qu'il n'y aura aucune bordure. Valeur par défaut. | Tester » |
| hidden | Identique à "none" sauf pour la résolution des conflits de bordure sur les éléments de tableau. | Tester » |
| dotted | Définit une bordure en pointillés. | Tester » |
| dashed | Définit une bordure en tirets. | Tester » |
| double | Définit une bordure double. | Tester » |
| solid | Définit une bordure pleine. | Tester » |
| groove | Définit une bordure en 3D en relief creux. Son effet peut être modifié avec la valeur de border-color. | Tester » |
| ridge | Définit une bordure en 3D en relief bombé. Son effet peut être modifié avec la valeur de border-color. | Tester » |
| inset | Définit une bordure en 3D enfoncée. Son effet peut être modifié avec la valeur de border-color. | Tester » |
| outset | Définit une bordure en 3D saillante. Son effet peut être modifié avec la valeur de border-color. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Parmi les options suivantes, lesquelles sont des valeurs valides pour la propriété 'border-top-style' en CSS ?