mdn · SphinxKnight · Jul 27, 2023 · Jul 27, 2023 · Jul 27, 2023
@@ -75,23 +75,44 @@ La propriété `border-left-style` se définit avec l'un des mots-clés utilisé
 /* On applique un style sur le tableau */
 table {
   border-width: 2px;
-  background-color: #52E385;
+  background-color: #52e385;
 }
-tr, td {
+tr,
+td {
   padding: 3px;
 }
 
 /* Des exemples pour border-left-style */
-.b1 {border-left-style: none;}
-.b2 {border-left-style: hidden;}
-.b3 {border-left-style: dotted;}
-.b4 {border-left-style: dashed;}
-.b5 {border-left-style: solid;}
-.b6 {border-left-style: double;}
-.b7 {border-left-style: groove;}
-.b8 {border-left-style: ridge;}
-.b9 {border-left-style: inset;}
-.b10 {border-left-style: outset;}
+.b1 {
+  border-left-style: none;
+}
+.b2 {
+  border-left-style: hidden;
+}
+.b3 {
+  border-left-style: dotted;
+}
+.b4 {
+  border-left-style: dashed;
+}
+.b5 {
+  border-left-style: solid;
+}
+.b6 {
+  border-left-style: double;
+}
+.b7 {
+  border-left-style: groove;
+}
+.b8 {
+  border-left-style: ridge;
+}
+.b9 {
+  border-left-style: inset;
+}
+.b10 {
+  border-left-style: outset;
+}
 ```
 
 ### Résultat

@@ -55,17 +55,17 @@ border-left-width: unset;
 ### CSS
 
 ```css
-.element1{
+.element1 {
   border-left-width: thick;
   border-left-style: solid;
   border-left-color: red;
 }
-.element2{
+.element2 {
   border-left-width: medium;
   border-left-style: solid;
   border-left-color: orange;
 }
-.element3{
+.element3 {
   border-left-width: thin;
   border-left-style: solid;
   border-left-color: green;
@@ -75,17 +75,11 @@ border-left-width: unset;
 ### HTML
 
 ```html
-<p class="element1">
-  Une bordure épaisse rouge.
-</p>
+<p class="element1">Une bordure épaisse rouge.</p>
 
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
+<p class="element2">Une bordure moyenne orange.</p>
 
-<p class="element3">
-  Et une bordure fine verte.
-</p>
+<p class="element3">Et une bordure fine verte.</p>
 ```
 
 ### Résultat

@@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté gauche d'un éléme
 > Comme pour les autres propriétés raccourcies, `border-left` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
 >
 > ```css
->   border-left-style: dotted;
->   border-left: thick green;
+> border-left-style: dotted;
+> border-left: thick green;
 > ```
 >
 > est équivalent à :
 >
 > ```css
->   border-left-style: dotted;
->   border-left: none thick green;
+> border-left-style: dotted;
+> border-left: none thick green;
 > ```
 >
 > et la valeur {{cssxref("border-left-style")}} fournie avant `border-left` est ignorée.
@@ -77,8 +77,7 @@ border-left: medium dashed green;
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
 </p>
 ```

@@ -154,21 +154,21 @@ border-radius: 1em / 5em;
 
 /* est équivalent à : */
 
-border-top-left-radius:     1em 5em;
-border-top-right-radius:    1em 5em;
+border-top-left-radius: 1em 5em;
+border-top-right-radius: 1em 5em;
 border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius:  1em 5em;
+border-bottom-left-radius: 1em 5em;
 ```
 
 ```css
 border-radius: 4px 3px 6px / 2px 4px;
 
 /* est équivalent à : */
 
-border-top-left-radius:     4px 2px;
-border-top-right-radius:    3px 4px;
+border-top-left-radius: 4px 2px;
+border-top-right-radius: 3px 4px;
 border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius:  3px 4px;
+border-bottom-left-radius: 3px 4px;
 ```
 
 ## Définition formelle

@@ -60,9 +60,10 @@ border-right-color: unset;
 
 ```html
 <div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
+  <p>
+    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
+    <span class="texterouge">rouge</span>.
+  </p>
 </div>
 ```
 

@@ -75,23 +75,44 @@ La propriété `border-right-style` se définit avec l'un des mots-clés utilis
 /* On applique un style sur le tableau */
 table {
   border-width: 2px;
-  background-color: #52E385;
+  background-color: #52e385;
 }
-tr, td {
+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;}
+.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

@@ -55,31 +55,25 @@ border-right-width: unset;
 ### CSS
 
 ```css
-.element1{
+.element1 {
   border-right: thick solid red;
 }
-.element2{
+.element2 {
   border-right: medium solid orange;
 }
-.element3{
+.element3 {
   border-right: thin solid green;
 }
 ```
 
 ### HTML
 
 ```html
-<p class="element1">
-  Une bordure épaisse rouge.
-</p>
+<p class="element1">Une bordure épaisse rouge.</p>
 
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
+<p class="element2">Une bordure moyenne orange.</p>
 
-<p class="element3">
-  Et une bordure fine verte.
-</p>
+<p class="element3">Et une bordure fine verte.</p>
 ```
 
 ### Résultat

@@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté droit d'un élémen
 > Comme pour les autres 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 celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
 >
 > ```css
->   border-right-style: dotted;
->   border-right: thick green;
+> border-right-style: dotted;
+> border-right: thick green;
 > ```
 >
 > est équivalent à :
 >
 > ```css
->   border-right-style: dotted;
->   border-right: none thick green;
+> border-right-style: dotted;
+> border-right: none thick green;
 > ```
 >
 > et la valeur {{cssxref("border-right-style")}} fournie avant `border-right` est ignorée.
@@ -77,8 +77,7 @@ border-right: medium dashed green;
 
 ```html
 <p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
+  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
 </p>
 ```

@@ -43,16 +43,16 @@ Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique corre
 
 ```css
 div {
-background-color: rebeccapurple;
-width: 120px;
-height: 120px;
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
   border-start-start-radius: 10px;
 }
 
 .texteExemple {
-writing-mode: vertical-rl;
-padding: 10px;
-background-color: #fff;
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
   border-start-start-radius: 10px;
 }
 ```
@@ -61,7 +61,7 @@ background-color: #fff;
 
 ```html
 <div>
-<p class="texteExemple">Exemple</p>
+  <p class="texteExemple">Exemple</p>
 </div>
 ```
 

@@ -68,9 +68,9 @@ Chacune des valeurs peut être un des mots-clés parmi la liste suivante.
   - : Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes&nbsp;:
 
     - `none`
-      - : L'effet obtenu est le même qu'avec `hidden`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, 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*&nbsp;; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
+      - : L'effet obtenu est le même qu'avec `hidden`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, 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_&nbsp;; 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`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, 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.
+      - : L'effet obtenu est le même qu'avec `none`&nbsp;: aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, 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-width`](/fr/docs/Web/CSS/border-width).
     - `dashed`

@@ -62,9 +62,10 @@ border-top-color: unset;
 
 ```html
 <div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
+  <p>
+    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
+    <span class="texterouge">rouge</span>.
+  </p>
 </div>
 ```
 

@@ -84,10 +84,10 @@ div {
 ### HTML
 
 ```html
- <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
+<div class="arc_cercle"></div>
+<div class="arc_ellipse"></div>
+<div class="pourcentage"></div>
+<div class="rognage"></div>
 ```
 
 ### Résultat

@@ -86,10 +86,10 @@ div {
 ### HTML
 
 ```html
- <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
+<div class="arc_cercle"></div>
+<div class="arc_ellipse"></div>
+<div class="pourcentage"></div>
+<div class="rognage"></div>
 ```
 
 ### Résultat