border-right-style

Baseline Widely available

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é border-right-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.

Exemple interactif

border-right-style: none;

border-right-style: dotted;

border-right-style: dashed;

border-right-style: solid;

border-right-style: groove;

border-right-style: inset;

<section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section>

#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: #fff; }

Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.

Syntaxe

css

/* Valeurs avec un mot-clé */ border-right-style: none; border-right-style: hidden; border-right-style: dotted; border-right-style: dashed; border-right-style: solid; border-right-style: double; border-right-style: groove; border-right-style: ridge; border-right-style: inset; border-right-style: outset; /* Valeurs globales */ border-right-style: inherit; border-right-style: initial; border-right-style: revert; border-right-style: unset;

La propriété border-right-style se définit avec l'un des mots-clés utilisés par la propriété border-style.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

border-right-style = 
 <line-style> 

<line-style> = 
 none |
 hidden |
 dotted |
 dashed |
 solid |
 double |
 groove |
 ridge |
 inset |
 outset

Exemples

HTML

html

<table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">petits points</td> <td class="b4">tirets</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>

CSS

css

/* On applique un style sur le tableau */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* Des exemples pour border-right-style */ .b1 { border-right-style: none; } .b2 { border-right-style: hidden; } .b3 { border-right-style: dotted; } .b4 { border-right-style: dashed; } .b5 { border-right-style: solid; } .b6 { border-right-style: double; } .b7 { border-right-style: groove; } .b8 { border-right-style: ridge; } .b9 { border-right-style: inset; } .b10 { border-right-style: outset; }

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-style

Compatibilité des navigateurs

Voir aussi

Les autres propriétés liées au style des bordures : border-left-style, border-top-style, border-bottom-style, border-style.
Les autres propriétés liées à la bordure droite : border-right, border-right-color, border-right-width.

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content