convert content to md

1 files changed, 62 insertions, 89 deletions

diff --git a/files/fr/web/css/border/index.md b/files/fr/web/css/border/index.md
index 1c1edbdede..547f4aad0d 100644
--- a/files/fr/web/css/border/index.md
+++ b/files/fr/web/css/border/index.md
@@ -7,30 +7,27 @@ tags:
   - Reference
 translation_of: Web/CSS/border
 ---
-<div>{{CSSRef("CSS Borders")}}</div>
+{{CSSRef("CSS Borders")}}
 
-<p>La propriété CSS <strong><code>border</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de définir les propriétés liées à la bordure. <code>border</code> peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.</p>
+La propriété CSS **`border`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de définir les propriétés liées à la bordure. `border` peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border.html")}}
 
-<p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p>
+Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est `none`). Ainsi, `border` peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (<code>border</code>) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.</p>
-</div>
+> **Note :** Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (`border`) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.
 
-<h3 id="Différences_entre_les_bordures_et_les_contours_(outlines)">Différences entre les bordures et les contours (<em>outlines</em>)</h3>
+### Différences entre les bordures et les contours (_outlines_)
 
-<p>Les bordures et <a href="/fr/docs/Web/CSS/outline">contours</a> sont similaires mais quelques différences les distinguent :</p>
+Les bordures et [contours](/fr/docs/Web/CSS/outline) sont similaires mais quelques différences les distinguent :
 
-<ul>
- <li>Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément</li>
- <li>Selon la spécification, les contours ne sont pas nécessairement rectangulaires.</li>
-</ul>
+- Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
+- Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* style */
+```css
+/* style */
 border: solid;
 
 /* largeur | style */
@@ -46,99 +43,75 @@ border: medium dashed green;
 border: inherit;
 border: initial;
 border: unset;
-</pre>
+```
 
-<p>La propriété <code>border</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#br-width">&lt;line-width&gt;</a></code>, <code><a href="#br-style">&lt;line-style&gt;</a></code> ou <code><a href="#color">&lt;color&gt;</a></code>.</p>
+La propriété `border` peut être définie grâce à une ou plusieurs valeurs [`<line-width>`](#br-width), [`<line-style>`](#br-style) ou [`<color>`](#color).
 
-<div class="note">
-<p><strong>Note :</strong> La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est <code>none</code>.</p>
-</div>
+> **Note :** La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est `none`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd>
- <dt><code>&lt;line-style&gt;</code></dt>
- <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd>
-</dl>
+- `<line-width>`
+  - : Voir {{cssxref("border-width")}} (la valeur par défaut est `medium`).
+- `<line-style>`
+  - : Voir {{cssxref("border-style")}} (la valeur par défaut est `none`).
+- `<color>`
+  - : Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.brd {
+```css
+.brd {
   border: 1px solid black;
 }
 style {
   border: 1px dashed black;
   display:block;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="brd"&gt;Oh des bordures&lt;/div&gt;
-&lt;p&gt;
+```html
+<div class="brd">Oh des bordures</div>
+<p>
   N'hésitez pas à éditer le CSS qui suit pour voir
   l'effet des valeurs.
-&lt;/p&gt;
-&lt;style contenteditable&gt;
+</p>
+<style contenteditable>
   .brd {
     border: 1px solid black;
   }
-&lt;/style&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La prise en charge du mot-clé <code>transparent</code> est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via <code>border</code>, cette dernière la réinitialise quand même avec sa valeur initiale (<code>none</code>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Le mot-clé <code>inherit</code> peut être utilisé et <code>transparent</code> est considéré comme une couleur valide.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("border-top-left-radius")}},</li>
- <li>{{cssxref("border-top-right-radius")}},</li>
- <li>{{cssxref("border-bottom-right-radius")}},</li>
- <li>{{cssxref("border-bottom-left-radius")}}</li>
-</ul>
+</style>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                                                                                                                                                                                                                                                |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}     | {{Spec2('CSS3 Backgrounds')}} | La prise en charge du mot-clé `transparent` est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via `border`, cette dernière la réinitialise quand même avec sa valeur initiale (`none`). |
+| {{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}} | {{Spec2('CSS2.1')}}                 | Le mot-clé `inherit` peut être utilisé et `transparent` est considéré comme une couleur valide.                                                                                                                                                                                                                                             |
+| {{SpecName('CSS1', '#border', 'border')}}                                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                                                                                                                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border")}}
+
+## Voir aussi
+
+- {{cssxref("border-top-left-radius")}},
+- {{cssxref("border-top-right-radius")}},
+- {{cssxref("border-bottom-right-radius")}},
+- {{cssxref("border-bottom-left-radius")}}