border-width, propriété CSS
Cette page concerne aussi les propriété(s) physique(s) :
border-top-widthborder-right-widthborder-bottom-widthborder-left-widthEt les propriétés logiques :
border-block-widthborder-block-start-widthborder-block-end-widthborder-inline-widthborder-inline-start-widthborder-inline-end-widthRésumé des caractéristiques de la propriété border-width
medium | thick | thinmediumborder-width passe progressivement d'une valeur à une autre.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de border-width.
border-width.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description des termes utilisés sur le schéma :
lengthest 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, etborder-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 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 :
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.
Valeurs pour border-width.
- border-width: 5px 1px 2px 2px;
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 valeursborder-width:5px 1px; - border-width: medium;
Valeur par défaut. Épaisseur moyenne (en général de l'ordre de 3 pixels).
border-width:medium; - border-width: thin;
Épaisseur fine (en général de l'ordre de 1 pixel).
border-width:thin; - border-width: thick;
Épaisseur large (en général de l'ordre de 5 pixels).
border-width:thick; - 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.
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-sizinga été fixés à la valeurborder-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'] = '1mm';
// ou
let el = document.getElementById('id');
el.style.borderWidth = '1mm';
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', '1mm');
// ou
$('#id').css('borderWidth', '1mm');
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.
border-top-width, border-left-width, etc. Les propriétés physiques ne prennent pas en compte les particularités de la langue.border-block-start-style, border-inline-end-style, etc. Ces propriétés s'adaptent au mode d'écriture de 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 :
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
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
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantborder-width. 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
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantborder-width. 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
Concernantborder-width. 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
Concernantborder-width. 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 "Module CSS - Arrière-plans et bordures".