border-width
============

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

* `border-top-width`,
* `border-right-width`,
* `border-bottom-width`
* `border-left-width`.

Si on utilise les propriétés logiques, elle définit `border-block-start-width`, `border-block-end-width`, `border-inline-start-width` et `border-inline-end-width`.

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie `border`.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* 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;

/\* côtés haut et bas | côtés gauche et droit \*/
border-width: 2px 1.5em;

/\* côté haut | côtés gauche et droit | côté 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.

* Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
* Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
* Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
* Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).
### Valeurs

`<line-width>`

Une valeur de longueur (type `<length>` ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :

* `thin` (fin)
* `medium` (intermédiaire)
* `thick` (épais)

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.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `border-bottom-width`: la longueur absolue ou `0` si `border-bottom-style` vaut `none` ou `hidden`
* `border-left-width`: la longueur absolue ou `0` si `border-left-style` vaut `none` ou `hidden`
* `border-right-width`: la longueur absolue ou `0` si `border-right-style` vaut `none` ou `hidden`
* `border-top-width`: la longueur absolue ou `0` si `border-top-style` vaut `none` ou `hidden`
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `border-bottom-width`: une longueur
* `border-left-width`: une longueur
* `border-right-width`: une longueur
* `border-top-width`: une longueur
 |

Syntaxe formelle
----------------
```

border-width =   
  <line-width>{1,4}    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### HTML


```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


```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

Spécifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les propriétés raccourcies liées aux bordures
    + `border`,
    + `border-style`
    + `border-color`
* Les propriétés liées à la largeur des bordures
    + `border-bottom-width`,
    + `border-left-width`,
    + `border-right-width`,
    + `border-top-width`