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.
La propriété raccourcie CSS border-right permet de définir toutes les propriétés de la bordure 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 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: #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
<br-width>-
Voir
border-right-width. <br-style>-
Voir
border-right-style. <color>-
Voir
border-right-color.
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 de border-right-style fournie avant border-right est ignorée. Comme la valeur par défaut de border-right-style est none, si vous n'indiquez pas la partie border-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