border-width CSS propriété

border-width : 1px;
border-width : 1px thick 1em;
border-width : 1px thick 1em thin;

Règles de syntaxes CSS pour border-width.

Règle d'écriture de l'épaisseur de bordure : border-width

Si la propriété d'épaisseur de bordure CSS border-width est suivie d'une valeur de taille, l'épaisseur est appliquée à toutes les bordures CSS.

.bordure-epaisseur{ border-width : 1px; }

Si la propriété d'épaisseur de bordure CSS border-width est suivie de deux valeurs de taille, la première est l'épaisseur des bordures CSS horizontales (bordure haute, bordure basse) et la seconde celle des bordures CSS verticales (bordure droite, bordure gauche).

.bordure-epaisseur{ border-width : 1px 2px; }

Si la propriété d'épaisseur de bordure CSS border-width est suivie de trois valeurs de taille, la première est l'épaisseur de la bordure haute, la deuxième est pour l'épaisseur des bordures CSS horizontales (bordure gauche, bordure droite) et la troisième pour l'épaisseur de la bordure basse.

.bordure-epaisseur{ border-width : 1px 2px 3px; }

Si la propriété d'épaisseur de bordure border-width CSS est suivie de quatre valeurs de taille, alors chaque valeur correspond à l'épaisseur de bordure CSS (bordure haute, bordure droite, bordure basse, bordure gauche).

.bordure-epaisseur{ border-width : 1px 2px 3px 4px; }

border-width impacte la taille réelle de l'élément

Les deux bordures Css horizontales s'ajoutent à la longueur spécifiée de width et les deux bordures Css verticales s'ajoutent à la hauteur spécifiée de height.
Votre hauteur ou longueur est donc en réalité plus grande.

border-width : 10px 11px 12px 13px;
width  : 150px;
height : 100px; 
/* 
  la longueur sera en réalité de 174px (150+11+13)
  la hauteur sera en réalité de 122px (100+10+12)
*/
width  : 126px; /* 150-11-13 */
height : 78px; /* 100-10-12 */ 
/* 
  la longueur calculée sera de 150px
  la hauteur calculée sera de 100px
*/

Epaisseur de la bordure Css par défaut de border-width

Si aucune épaisseur de bordure Css n'a été spécifiée alors, chaque épaisseur de bordure Css par défaut aura la valeur medium.

Compatibilités navigateurs de la propriété border-width

Equivalence de la CSS border-width en HTML.

Remplace l'attribut border de la balise (X)HTML img,table, object, frameset.

Exemples et astuces CSS pour utiliser border-width

Spécifier les tailles des bordures CSS individuellement

Vous pouvez définir individuellement chaque taille de bordure Css en utilisant une des propriétés CSS suivante :

• border-bottom-width, définie la taille de la bordure Css basse.
• border-top-width, définie la taille de la bordure Css haute.
• border-left-width, définie la taille de la bordure Css gauche.
• border-right-width, définie la taille de la bordure Css droite.

.identifiant{
  border-bottom-width : 3px;
  border-top-width : 1rem;
  border-left-width : 3px;
  border-right-width : 1em;
}

Votre avis sur la définition border-width en CSS