border-image-width |
Largeur de bordure de l'image |
|---|---|
| CSS3 |
Syntaxe
|
border-image-width: paramètres; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer la largeur de bordure d'image : | |
| Valeur | Description | |
| inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | |
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
| largeurin | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en pouce. | |
| largeurpt | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en points. | |
| largeurpx | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en pixels. | |
| pourcentage% | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en fonction du pourcentage d'espace disponible. | |
| largeur | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en nombre réel (à virgule flottante). | |
Description
Cette propriété permet d'indiquer la largeur de bordure de l'image.
Remarques
- Définition et rôle : La propriété border-image-width détermine la largeur de la bordure générée à partir de l'image spécifiée avec border-image-source. Elle contrôle la quantité de l'image découpée appliquée aux bords, influençant directement l'épaisseur visible des bordures autour de l'élément.
- Valeurs possibles : Cette propriété accepte plusieurs types de valeurs : unités absolues (px, em, rem,...), unités relatives (pourcentage par rapport à la largeur de la bordure de l'élément), ou une valeur numérique sans unité qui agit comme un facteur multiplicatif de la largeur de la bordure normale définie par border-width.
- Syntaxe avec une ou plusieurs valeurs : border-image-width peut accepter une à quatre valeurs pour spécifier des largeurs différentes pour chaque côté (haut, droite, bas, gauche). Une seule valeur s'applique uniformément aux quatre côtés, tandis que plusieurs valeurs permettent un contrôle plus précis pour des bordures asymétriques.
- Interaction avec border-width : Si border-width n'est pas spécifiée, border-image-width prend sa place pour définir l'épaisseur de la bordure. Dans les cas où les deux sont définis, border-image-width ajuste uniquement la zone réservée à l'image, sans modifier la largeur totale de la bordure.
- Effet visuel et équilibre : Une border-image-width trop petite peut rendre la bordure difficilement visible, surtout avec des motifs détaillés ou complexes. Inversement, une largeur trop grande peut occuper une part importante de l'espace de l'élément, ce qui peut nuire à la lisibilité du contenu.
- Pourcentages dynamiques : Lorsque des pourcentages sont utilisés, la largeur est calculée par rapport à la largeur totale de la bordure de l'élément. Cela rend la propriété très utile dans des designs adaptatifs où les dimensions des éléments varient en fonction de la taille de l'écran ou du conteneur parent.
- Compatibilité avec border-image-slice : La valeur définie dans border-image-width est directement influencée par la découpe définie via border-image-slice. Si les proportions entre les deux propriétés ne sont pas bien coordonnées, l'image peut apparaître déformée ou mal alignée dans la bordure.
- Compatibilité des navigateurs : Cette propriété est largement supportée par les navigateurs modernes tels que Google Chrome, Firefox, Edge et Safari. Cependant, il est conseillé de tester son comportement avec différentes tailles d'éléments et dans des environnements variés pour garantir un rendu visuel optimal.
Dernière mise à jour : Dimanche, le 20 décembre 2015