aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/border-left-style/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/border-left-style/index.html')
-rw-r--r--files/fr/web/css/border-left-style/index.html36
1 files changed, 3 insertions, 33 deletions
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html
index ad7a1c9fb9..3bb7d560f3 100644
--- a/files/fr/web/css/border-left-style/index.html
+++ b/files/fr/web/css/border-left-style/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-left-style
<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
-<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
-
-<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+<div class="note">
+ <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
+</div>
<h2 id="Syntaxe">Syntaxe</h2>
@@ -46,73 +46,43 @@ border-left-style: unset;
<tbody>
<tr>
<td><code>none</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div>
- </td>
<td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
</tr>
<tr>
<td><code>hidden</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div>
- </td>
<td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
</tr>
<tr>
<td><code>dotted</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div>
- </td>
<td>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 {{cssxref("border-left-width")}}.</td>
</tr>
<tr>
<td><code>dashed</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div>
- </td>
<td>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.</td>
</tr>
<tr>
<td><code>solid</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div>
- </td>
<td>Affiche une ligne droite continue.</td>
</tr>
<tr>
<td><code>double</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div>
- </td>
<td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td>
</tr>
<tr>
<td><code>groove</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div>
- </td>
<td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
</tr>
<tr>
<td><code>ridge</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div>
- </td>
<td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
</tr>
<tr>
<td><code>inset</code></td>
- <td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div>
- </td>
<td>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 <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
</tr>
<tr>
<td><code>outset</code></td>
<td>
- <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div>
- </td>
- <td>
<p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
</td>
</tr>