Border-width, propriété CSS

Schéma de la syntaxe de border-width.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension.
• De une à quatre valeurs peuvent être citées, séparées par un espace.

Description de la propriété border-width.

border-width définit l'épaisseur des bordures d'un élément. C'est une propriété résumée en ce sens qu'elle définit en une seule écriture l'épaisseur des quatre bordures.

Il existe également des propriété spécifiques pour chacune des bordures:
    border-top-width : bordure du haut,
    border-right-width : bordure du côté droit,
    border-bottom-width : bordure du bas, et
    border-left-width : bordure du côté gauche.

Pour que les bordures soit visibles, pensez aussi à définir également la propriété border-style. Ce qui donne lieu à une petite particularité : la valeur initiale de border-width est bien medium (environ 3 pixels) mais si border-style n'est pas défini, l'élément n'a pas de bordure et l'épaisseur de sa bordure est comptée comme 0. Ceci est illustré par l'exemple ci-dessous : border-width n'est défini ni sur l'exemple de gauche ni sur celui de droite, mais la bordure n'est présente que sur le deuxième exemple parce que border-style n'est définie que sur ce deuxième élément.

Notez aussi que certains styles de trait (double, effets de relief) nécessitent une épaisseur minimale de 2 ou 3 pixels pour être correctement restitués.

Prise en charge de la langue.

Les propriétés logiques prennent en compte le sens et la direction d'écriture, avec les équivalences suivantes pour les langues latines :

Pour les langues non latines, reportez-vous au schéma interactif ci-dessous :*

Il faut ajouter les propriétés résumées suivantes, qui acceptent chacune deux valeurs : border-block-width et border-inline-width. Elles permettent de définir en une seule écriture les valeurs pour start et end.

Valeurs pour border-width.

• border-width: a b c d;

  Ceci est la syntaxe générale de border-width : de une à quatre valeurs séparées par des espaces. Les règles d'attribution sont les suivantes, en fonction du nombre de valeurs fournies :

  
  Une seule valeur

  
  Deux valeurs

  
  Trois valeurs

  
  Quatre valeurs
• border-width: 5px;

  De une à quatre valeurs numériques, positives ou nulles, suivies de leur unité de dimension (voir les unités de dimension).

• border-width: medium;

  Valeur par défaut. Épaisseur moyenne (en général de l'ordre de 3 pixels).

• border-width: thin;

  Épaisseur fine (en général de l'ordre de 1 pixel).

• border-width: thick;

  Épaisseur large (en général de l'ordre de 5 pixels).

Valeurs communes à toutes les propriétés :

Exemples d'utilisation de la propriété border-width.

Effet particulier obtenu avec une bordure d'épaisseur différente pour le haut

Exemple d'animation de border-width.

L'animation de la propriété border-width ne pose aucun problème, et est très fluide.

Notez que la bordure s'agrandit vers l'intérieur, c'est à dire que les dimensions de l'élément ne changent pas. Le système se comporte de cette façon pour deux raisons :

• box-sizing a été fixés à la valeur border-box.
• La hauteur de l'élément a été fixée. Si celle-ci était été définie à auto, ce sont les dimensions extérieures de l'élément qui absorberaient l'épaisseur de la bordure.

Accéder à la propriété border-width par programme.

Modifier la valeur de border-width en Javascript.

Deux variantes de code Javascript peuvent convenir : avec le nom de la propriété écrit en kebab-case, typique du CSS (un tiret pour séparer les mots), ou en notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['border-width'] = 'medium'; // ou let el = document.getElementById('id'); el.style.borderWidth = 'medium';

Lire en Javascript la valeur de border-width.

L'exemple de code ci-après récupère la valeur de border-width si celle-ci a été affectée directement à l'élément lui-même, via l'attribut style du HTML, et non pas dans la feuille de styles en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['border-width']; // ou let el = document.getElementById('id'); let value = el.style.borderWidth;

Lire la valeur calculée de border-width en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la résolution de la cascade des héritages. Si cette logique ne donne aucune valeur, la valeur calculée sera la valeur initiale de la propriété (medium dans le cas de border-width).

L'épaisseur est toujours renvoyée en pixels, même si elle a été définie avec l'un des mots-clé thin, thick ou medium.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-width');

Modifier la valeur de la propriété border-width avec JQuery.


$('#id').css('border-width', 'medium');
// ou
$('#id').css('borderWidth', 'medium');


Lire la valeur calculée de la propriété border-width avec JQuery.

Comme en Javascript, la valeur est retournée en pixels.

let value = $('#id').css('border-width');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Le deuxième bouton permet de voir comment est mémorisée (sérialisée) la valeur de border-width. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage). Toutes les autres unités sont converties en pixels.

Exemple interactif avec la propriété border-width.

Compatibilité des navigateurs avec border-width.

Comme on peut le voir sur le tableau de compatibilité ci-dessous, la propriété border-width ne pose aucun problème avec les navigateurs actuels, aussi bien les propriétés physiques, que les propriétés logiques.

1

border-width
(propriétés physiques)

2

border-width
(propriétés logiques)

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété border-width.

La propriété résumée border-width et les propriétés détaillées correspondantes n'ont pas évolué au fil des versions du langage CSS.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété résumée border-width et des propriétés détaillées pour chacun des bords.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Pas de changement concernant les propriétés border-width... si ce n'est qu"elles acceptent la valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction des propriétés logiques (prenant en charge le mode d'écriture en fonction de la langue) pour la définition des épaisseurs de bordure.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Arrière-plans et bordures - Niveau 3

  Pas de changement concernant les propriétés border-width....
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des bordures.

Les propriétés relatives aux arrière-plans et aux bordures sont décrites dans la spécification du W3C "CSS Backgrounds and Borders Module".

Propriétés :