From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/border-width/index.html | 216 +++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 files/fr/web/css/border-width/index.html (limited to 'files/fr/web/css/border-width') diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html new file mode 100644 index 0000000000..a4ced190b5 --- /dev/null +++ b/files/fr/web/css/border-width/index.html @@ -0,0 +1,216 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.

+ +

Cette propriété raccourcie définit les propriétés détaillées

+ + + +

Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.

+ +

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-width.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* Une largeur pour chaque côté */
+/* Valeur de type <length> */
+border-width: 5px;
+
+/* largeur verticale puis horizontale */
+border-width: 2px 1.5em;
+
+/* haut | largeur horizontale | bas */
+border-width: 1px 2em 1.5cm;
+
+/* haut | droite | bas | gauche */
+border-width: 1px 2em 0 4rem;
+
+/* Valeurs globales */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+
+ +

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

+ + + +

Valeurs

+ +
+
<line-width>
+
Une valeur de longueur (type {{cssxref("<length>")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		La bordure est fine.
medium +
 
+ 		La bordure est moyenne.
thick +
 
+ 		La bordure est épaisse.
+  La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : thin ≤ medium ≤ thick et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p id="unevaleur">
+  Une valeur : la bordure fait 6px sur les 4 côtés.
+</p>
+
+<p id="deuxvaleurs">
+  Deux valeurs différentes : elle fait 2px en haut
+  et en bas et elle mesure 10px pour les bords droit
+  et gauche.
+</p>
+
+<p id="troisvaleurs">
+  Trois valeurs différentes : 0.3em pour le haut,
+  9px pour le bas et zéro pour la droite et la
+  gauche.
+</p>
+
+<p id="quatrevaleurs">
+  Quatre valeurs différentes : "thin" pour le haut,
+  "medium" pour la droite, "thick" pour le bas
+  et 1em pour la gauche.
+</p>
+ +

CSS

+ +
#unevaleur {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+
+#deuxvaleurs {
+  border: solid red;
+  border-width: 2px 10px;
+}
+
+#troisvaleurs {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+
+#quatrevaleurs {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe. La modification du type de données {{cssxref("<length>")}} impacte cette propriété.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.border-width")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf