Border-width, propriété CSS
Résumé des caractéristiques de la propriété border-width
medium | thick | thinmediumborder-width passe progressivement d'une valeur à une autre.Schéma syntaxique de border-width.
border-widthCliquez sur le schéma pour plus de détails sur les valeurs
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
lengthest une valeur numérique positive ou nulle, suivie d'une unité 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.
pas de bordure donc épaisseur = 0.
L'épaisseur initiale est
medium
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 du mode d'écriture suivant 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 :
border-top-width | ⇒ | border-block-start-width |
border-right-width | ⇒ | border-inline-end-width |
border-bottom-width | ⇒ | border-block-end-width |
border-left-width | ⇒ | border-inline-start-width |
Pour les langues non latines, reportez-vous au schéma interactif ci-dessous :*
border-top-widthborder-left-widthborder-right-widthborder-bottom-widthIl 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.
Syntaxes 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 CSS 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 :
border-width: initial (medium)
border-width: inherit
border-width: revert
border-width: revertLayer
border-width: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemple.
Effet particulier obtenu avec une bordure d'épaisseur différente pour le haut
Animation de border-width.
L'animation de la propriété border-width ne pose aucun problème.
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 parce que
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.
Manipulation de la propriété border-width par programme.
Les codes donnés en exemple travaillent sur l'élément ci-dessous (le cercle bleu). Le type de la bordure border-style est déjà défini.
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).
function setBorderWidth(el) {
el.style['border-width']='thick';
// ou
el.style.borderWidth='thick';
}
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.
function getBorderWidth(el) {
alert(el.style['border-width']);
// ou
alert(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.
function getCalcBorderWidth(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-width'));
}
Modifier la valeur de la propriété border-width avec JQuery.
function setBorderWidth(el) {
$(el).css('border-width','3px');
// ou
$(el).css('borderWidth','3px');
}
Lire la valeur calculée de la propriété border-width avec JQuery.
Comme en Javascript, la valeur est retournée en pixels.
function getCalcBorderWidth(el) {
alert($(el).css('border-width'));
// ou
alert($(el).css('borderWidth'));
}
Exemple interactif.
Prise en charge par les navigateurs (compatibilité).
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.
border-width : border-top-width, border-left-width, border-right-width, etc.
Les propriétés physiques ne prennent pas en compte les particularités de la langue (direction et sens d'écriture).
border-width : border-block-start-style, border-inline-end-style, etc.
Ces propriétés s'adaptent à la langue.
border-width(propriétés physiques)
border-width(propriétés logiques)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique 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éeborder-widthet des propriétés détaillées pour chacun des bords.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne 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ésborder-width...si ce n'est qu"elles acceptent la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
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 2017Document de travail.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Pas de changement concernant les propriétésborder-width....02 Août 2002Document de travail.17 Décembre 2009Candidat à 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".