Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Propriété CSS border-right-width
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS border-right-width permet de définir l'épaisseur de la bordure à droite d'un élément.
Exemple interactif
border-right-width: thick;
border-right-width: 2em;
border-right-width: 4px;
border-right-width: 2ex;
border-right-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
/* Valeurs avec un mot-clé */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* Valeurs de longueurs */
/* Type <length> */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* Valeurs globales */
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;
Valeurs
<line-width>-
Une valeur de longueur (
<length>) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :thin(fin)- Identique à
1px.
- Identique à
medium(intermédiaire)- Identique à
3px.
- Identique à
thick(épais)- Identique à
5px.
- Identique à
Définition formelle
| Valeur initiale | medium |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | la longueur absolue ou 0 si border-right-style vaut none ou hidden |
| Type d'animation | une longueur |
Syntaxe formelle
border-right-width =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Exemples
Comparer les largeurs de bordure
HTML
<div>Élément 1</div>
<div>Élément 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-right-width: thick;
}
div:nth-child(2) {
border-right-width: 2em;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- Les autres propriétés liées à la largeur de la bordure :
border-bottom-width,border-left-width,border-top-widthetborder-width. - Les autres propriétés CSS liées à la bordure du côté droit :
border,border-right,border-right-styleetborder-right-color.
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.