Propriété CSS border-right-width
La propriété border-right-width est utilisée pour définir la largeur de la bordure droite d'un élément. La largeur de la bordure droite, ainsi que celle de tous les autres côtés, peut également être définie à l'aide des propriétés raccourcies border ou border-width.
Pour définir border-right-width, vous devez d'abord définir la propriété border-style, car il faut des bordures avant de définir leur largeur. La propriété border-right-style ou border-style peut être utilisée pour spécifier le style de la bordure.
INFO
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils suivent toujours cet ordre : thin ≤ medium ≤ thick.
INFO
La spécification ne définit pas comment les bordures de largeurs et de styles 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.borderRightWidth = "5px"; |
Syntaxe
Syntaxe de la propriété CSS border-right-width
border-right-width: medium | thin | thick | length | initial | inherit;Exemple de la propriété border-right :
Exemple de la propriété CSS border-right-width avec la valeur thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
width: 50%;
border-style: dotted;
border-right-width: thick;
}
</style>
</head>
<body>
<h2>Border-right-width example</h2>
<p>As you can see the width of the right border is set to thick.</p>
</body>
</html>Exemple de la propriété border-right avec toutes les valeurs :
Exemple de la propriété CSS border-right-width avec les valeurs medium, thin, thick, px, 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-right-width example classes */
.b1 {
border-right-width: medium;
}
.b2 {
border-right-width: thin;
}
.b3 {
border-right-width: thick;
}
.b4 {
border-right-width: 10px;
}
.b5 {
border-right-width: initial;
}
.b6 {
border-right-width: inherit;
}
</style>
</head>
<body>
<h1>Border-right-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 lenght
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| medium | Définit une bordure droite de largeur moyenne. C'est la valeur par défaut de cette propriété. | Tester » |
| thin | Définit une bordure droite fine. Il appartient à l'agent utilisateur de déterminer la largeur exacte. | Tester » |
| thick | Définit une bordure droite épaisse. Il appartient à l'agent utilisateur de déterminer la largeur exacte. | Tester » |
| length | Définit la longueur d'épaisseur de la bordure droite. Par exemple, 10px, 5em, 8pt, etc. | 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
Que spécifie la propriété CSS 'border-right-width' ?