Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-right
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.
Lapropriété raccourcieCSSborder-right permet de définir toutes les propriétés de labordure droite d'un élément.
Exemple interactif
border-right: solid;border-right: dashed red;border-right: 1rem solid;border-right: thick double #32a1ce;border-right: 4mm ridge rgb(211 220 50 / 0.6);<section> <div> Ceci est une boîte avec une bordure autour. </div></section>#example-element { background-color: #eeeeee; color: darkmagenta; padding: 0.75em; width: 80%; height: 100px;}Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
border-right: 1px;border-right: 2px dotted;border-right: medium dashed green;/* Valeurs globales */border-right: inherit;border-right: initial;border-right: revert;border-right: revert-layer;border-right: unset;Valeurs
Description
Comme pour toutes les propriétés raccourcies,border-right définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si elles ne sont pas définies. Celles qui ne sont pas définies prennent leur valeur par défaut. Considérez le code suivant :
border-right-style: dotted;border-right: thick green;Cela revient en fait au même que :
border-right-style: dotted;border-right: none thick green;La valeur deborder-right-style fournie avantborder-right est ignorée. Comme la valeur par défaut deborder-right-style estnone, si vous n'indiquez pas la partieborder-style, il n'y aura pas de bordure.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à::first-letter. |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
border-right =
<line-width>||
<line-style>||
<color>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Exemples
Appliquer une bordure à droite
HTML
<div>Ceci est une boîte avec une bordure sur le côté droit.</div>CSS
div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center;}Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Compatibilité des navigateurs
Voir aussi
- La propriété
border - La propriété
border-block - La propriété
outline