Propriété CSS border-right-style
La propriété CSS border-right-style définit le style de la bordure droite d'un élément. Découvrez toutes les valeurs avec des exemples.
La propriété CSS border-right-style définit le style de ligne de la bordure droite d'un élément, par exemple solid, dashed ou dotted. La valeur est un mot-clé unique choisi parmi le même ensemble disponible pour le raccourci border-style — la différence est que border-style stylise les quatre côtés à la fois, tandis que border-right-style cible uniquement le côté droit.
Il s'agit de l'équivalent par côté de border-style. Utilisez-la lorsque vous souhaitez un style de ligne différent à droite par rapport aux autres côtés — par exemple, un séparateur solid à droite d'une barre latérale tandis que le haut, le bas et la gauche restent sans bordure.
Pourquoi la bordure peut ne pas apparaître
Une bordure comporte trois parties indépendantes : style, largeur et couleur. Le style est la seule partie obligatoire — si vous ne définissez pas de style, le navigateur utilise la valeur par défaut none et la bordure n'est pas dessinée du tout, quelle que soit la largeur ou la couleur que vous lui donnez. C'est donc border-right-style qui rend réellement la bordure droite visible.
La largeur par défaut de la bordure droite est medium. Ajustez-la avec border-right-width ou border-width, et définissez sa couleur avec border-right-color. Pour définir le style, la largeur et la couleur en une seule déclaration, utilisez le raccourci border-right.
Tous les navigateurs ne restituent pas les styles de manière identique. Chrome, par exemple, restitue les points dotted sous forme de petits carrés plutôt que de cercles, et l'espacement exact des points et des tirets est laissé à la discrétion du navigateur.
La spécification ne précise pas l'espacement entre les points et les tirets.
La spécification ne définit pas comment les bordures de styles différents se rejoignent dans les coins.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritage | Non |
| Animatable | Non |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderRightStyle = "dashed"; |
Syntaxe
Syntaxe de la propriété CSS border-right-style
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété border-right-style :
Exemple de la propriété CSS border-right-style avec les valeurs solid et dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-right-style: solid;
}
p {
border-right-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with solid border-right-style.</h2>
<p>A paragraph with dotted border-right-style.</p>
</body>
</html>Regardez un exemple où toutes les valeurs de style sont utilisées pour voir la différence entre elles :
Selon la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent être modifiés.
Exemple de la propriété border-right-style avec toutes les valeurs :
Exemple de la propriété CSS border-right-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: #c9c5c5;
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: #1c87c9;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-style example classes */
.b1 {
border-right-style: hidden;
}
.b2 {
border-right-style: dotted;
}
.b3 {
border-right-style: dashed;
}
.b4 {
border-right-style: solid;
}
.b5 {
border-right-style: double;
}
.b6 {
border-right-style: groove;
}
.b7 {
border-right-style: ridge;
}
.b8 {
border-right-style: inset;
}
.b9 {
border-right-style: outset;
}
</style>
</head>
<body>
<h1>Border-right-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>Résultat
Valeurs
| Valeur | Description | Essayez |
|---|---|---|
| none | Définit qu'il n'y aura aucune bordure. Valeur par défaut. | Essayez » |
| hidden | Identique à "none", sauf lors de la résolution de conflits de bordures pour les éléments de tableau. | Essayez » |
| dotted | Définit une bordure en pointillés. | Essayez » |
| dashed | Définit une bordure en tirets. | Essayez » |
| double | Définit une bordure double. | Essayez » |
| solid | Définit une bordure pleine. | Essayez » |
| groove | Définit une bordure 3D en creux. Son effet peut être modifié par la valeur de border-color. | Essayez » |
| ridge | Définit une bordure 3D en relief. Son effet peut être modifié par la valeur de border-color. | Essayez » |
| inset | Définit une bordure 3D enfoncée. Son effet peut être modifié par la valeur de border-color. | Essayez » |
| outset | Définit une bordure 3D saillante. Son effet peut être modifié par la valeur de border-color. | Essayez » |
| initial | Définit la propriété à sa valeur par défaut. | Essayez » |
| inherit | Hérite la propriété de son élément parent. |
none vs hidden
Les deux mots-clés produisent le même rendu sur un élément normal — ni l'un ni l'autre ne dessine de ligne. La différence n'a d'importance que dans les tableaux à bordures fusionnées : avec border-collapse: collapse, une bordure hidden l'emporte lors de la résolution des conflits de bordures et supprime la bordure de la cellule voisine, tandis que none a la priorité la plus basse et est écrasée par toute bordure adjacente.
Propriétés associées
- border-right — raccourci pour la largeur, le style et la couleur de la bordure droite.
- border-right-width et border-right-color — les deux autres parties de la bordure droite.
- border-style — définit le style de ligne des quatre côtés à la fois.