border-image-width CSS propriété

Définition de la CSS border-image-width.

La propriété de bordure d'image CSS border-image-width permet de spécifier l'épaisseur des quatre bordures d'image Css d'un élément.

Exemple de syntaxe CSS border-image-width :
border-image-width : auto;
border-image-width : 10px;
border-image-width : 1px 3px 1em 3rem;

La propriété de feuille de style border-image-width CSS peut pendre une ou des valeurs séparées par un espace :

  • numérique positif suivi d'une unité CSS de longueur, sauf "%" qui n'est pas autorisée,
  • numérique : valeur positive qui sera multipliée par la valeur calculée de .
  • auto : la valeur utilisée sera calculée en fonction de chaque valeur de .
    Sauf si la propriété Css a été spécifiée, dans ce cas se seront les valeurs du découpage spécifiées qui seront utilisées.
  • inherit : hérite de l'épaisseur de la bordure d'image de son parent.

Conditions d'application de la CSS border-image-width.

La propriété de bordure d'image CSS border-image-width est applicable sur l'ensemble des balises HTML ou XHTML et au pseudo-élément CSS . Sauf sur les éléments de tableaux si la propriété Css à la valeur collapse.

La valeur de la CSS border-image-width peut être mise directement dans la propriété de raccourci CSS .

Héritage des valeurs Css de border-image-width.

La propriété de bordure d'image CSS border-image-width n'est pas héritée.

Problème d'interprétation de border-image-width en Css.

La propriété de bordure d'image CSS border-image-width ne pose pas un problème d'interprétation. Cependant, il existe un bug lié à border-style voir le bug dans border-image.

Règles de syntaxes CSS pour border-image-width.

Règle d'écriture de border-image-width

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

Exemple d'écriture CSS de border-image-width : 
.identifiant{
  border-image-width : 1px;
}

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

Exemple d'écriture CSS de border-image-width : 
.identifiant{
  border-image-width : 1px 2px;
}

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

Exemple d'écriture CSS de border-image-width : 
.identifiant{
  border-image-width : 1px 2px 3px ;
}

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

Exemple d'écriture CSS de border-image-width : 
.identifiant{
  border-image-width : 1px 2px 3px 4px;
}

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

Détails des versions de la CSS border-image-width
Résumé du support navigateurs de la CSS border-image-width

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

Votez pour la définition CSS border-image-width

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/border-image-width-css.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.