diff options
Diffstat (limited to 'files/fr/web/css/border-top-width/index.md')
| -rw-r--r-- | files/fr/web/css/border-top-width/index.md | 151 |
1 files changed, 66 insertions, 85 deletions
diff --git a/files/fr/web/css/border-top-width/index.md b/files/fr/web/css/border-top-width/index.md index e96b5ef89f..b248ebff5f 100644 --- a/files/fr/web/css/border-top-width/index.md +++ b/files/fr/web/css/border-top-width/index.md @@ -7,16 +7,17 @@ tags: - Reference translation_of: Web/CSS/border-top-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>border-top-width</code></strong> définit l'épaisseur de la bordure pour le côté haut d'une boîte.</p> +La propriété **`border-top-width`** définit l'épaisseur de la bordure pour le côté haut d'une boîte. -<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-width.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Une valeur de longueur */ -/* Type <length> */ +```css +/* Une valeur de longueur */ +/* Type <length> */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; @@ -30,30 +31,30 @@ border-top-width: thick; border-top-width: inherit; border-top-width: initial; border-top-width: unset; -</pre> +``` -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code><line-width></code></dt> - <dd>Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : - <ul> - <li><code>thin</code> (fin)</li> - <li><code>medium</code> (intermédiaire)</li> - <li><code>thick</code> (épais)</li> - </ul> - La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd> -</dl> +- `<line-width>` -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + - : Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes : + + - `thin` (fin) + - `medium` (intermédiaire) + - `thick` (épais) + + La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.element1{ +```css +.element1{ border-top: thick solid red; } .element2{ @@ -62,73 +63,53 @@ border-top-width: unset; .element3{ border-top: thin solid green; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p class="element1"> +```html +<p class="element1"> Une bordure épaisse rouge. -</p> +</p> -<p class="element2"> +<p class="element2"> Une bordure moyenne orange. -</p> +</p> -<p class="element3"> +<p class="element3"> Et une bordure fine verte. -</p></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","300")}}</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-width', 'border-top-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Pas de modification significative.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td> - <td>{{Spec2('CSS2.1')}}</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-top-width")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les autres propriétés liées à la largeur de la bordure : - <ul> - <li>{{cssxref("border-left-width")}},</li> - <li>{{cssxref("border-right-width")}},</li> - <li>{{cssxref("border-bottom-width")}},</li> - <li>{{cssxref("border-width")}}</li> - </ul> - </li> - <li>Les autres propriétés CSS liées à la bordure du côté haut : - <ul> - <li>{{cssxref("border")}},</li> - <li>{{cssxref("border-top")}},</li> - <li>{{cssxref("border-top-style")}},</li> - <li>{{cssxref("border-top-color")}}.</li> - </ul> - </li> -</ul> +</p> +``` + +### Résultat + +{{EmbedLiveSample("Exemples","200","300")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}} | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative. | +| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.border-top-width")}} + +## Voir aussi + +- Les autres propriétés liées à la largeur de la bordure : + + - {{cssxref("border-left-width")}}, + - {{cssxref("border-right-width")}}, + - {{cssxref("border-bottom-width")}}, + - {{cssxref("border-width")}} + +- Les autres propriétés CSS liées à la bordure du côté haut : + + - {{cssxref("border")}}, + - {{cssxref("border-top")}}, + - {{cssxref("border-top-style")}}, + - {{cssxref("border-top-color")}}. |