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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
Syntaxe
/* 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: unset;
Valeurs
<br-style>
- Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes :
none
L'effet obtenu est le même qu'avec hidden
: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée deborder-right-width
sera0
, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures,none
a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.hidden
L'effet obtenu est le même qu'avec none
: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée deborder-right-width
sera0
, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures,hidden
a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.dotted
Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de border-right-width
.dashed
Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation. solid
Affiche une ligne droite continue. double
Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par border-width
ouborder-right-width
.groove
La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge
.ridge
La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove
.inset
La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset
). Lorsqu'elle est appliquée sur une cellule de tableau et queborder-collapse
vautcollapsed
, cette valeur se comporte commegroove
.outset
La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à
inset
). Lorsqu'elle est utilisé sur une cellule de tableau avecborder-collapse
qui vautcollapsed
, cette valeur se comporte commeridge
. inherit
- Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
Syntaxe formelle
<line-style>où
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Exemples
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;}
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>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Backgrounds and Borders Module Level 3 La définition de 'border-right-style' dans cette spécification. |
Candidat au statut de recommandation | Aucune modification significative. |
CSS Level 2 (Revision 1) La définition de 'border-right-style' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-right-style | Chrome Support complet 1 | Edge Support complet 12 | Firefox
Support complet
1
| IE Support complet 5.5 | Opera Support complet 9.2 | Safari Support complet 1 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android
Support complet
14
| Opera Android Support complet Oui | Safari iOS Support complet 1 | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
Voir aussi
- Les autres propriétés liées au style des bordures :
- Les autres propriétés liées à la bordure droite :