border-image CSS propriété

Définition de la CSS border-image.

La propriété de bordure d'image CSS border-image est un raccourci pour déclarer un ensemble de propriétés d'images de bordure Css en une seule fois.

Exemple de syntaxe CSS border-image :

border-image : url(bordure-image.gif) 10 space;
border-image : url(bordure-image.gif) 10 / 5 space;
border-image : url(bordure-image.gif) 27 41 41 27 / 3 / 5px round;

La propriété de bordure d'image CSS border-image peut prendre à la suite, les valeurs des propriétés CSS de (dans l'ordre énoncé):

border-image-source : image ou dégradé à utiliser pour l'image de bordure.
border-image-slice : valeur qui détermine les motifs de l'image de bordure Css, peut être omise.
border-image-width : valeur de l'épaisseur de la bordure d'image Css, peut être omise.
border-image-outset : valeur du décalage de la bordure d'image Css, peut être omise..
border-image-repeat : valeur de répétition des motifs de l'image de bordure Css, peut être omise.

Exemple de code border-image CSS

Conditions d'application de la CSS border-image.

La propriété de bordure d'image CSS border-image est applicable sur l'ensemble des balises HTML ou XHTML et au pseudo-élément CSS :first-letter. Sauf sur les éléments de tableaux si la propriété Css border-collapse à la valeur collapse.
L'image de bordure Css ne doit pas contenir d'informations qui donnent un sens à l'élément ou la page (accessibilité).

Héritage des valeurs Css de border-image.

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

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

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

Règles de syntaxes CSS pour border-image.

Règle d'écriture de la propriété de bordure d'image Css border-image

Si l'on veut déclarer toutes les valeurs alors l'écriture est la suivante :

Ecriture complète du raccourci border-image :

border-image-source border-image-slice / border-image-width / border-image-outset border-image-repeat

Le trio border-image-slice, border-image-width et border-image-outset doit être séparé par des "/", si vous voulez omettre une des trois valeurs sachez que :

La première valeur sera toujours considérée comme étant la propriété Css border-image-slice.
La deuxième valeur sera toujours considérée comme étant la propriété Css border-image-outset

Ecriture complète du raccourci border-image :

border-image-source border-image-slice / border-image-width  border-image-repeat
border-image-source border-image-slice border-image-repeat
border-image-source border-image-repeat

La propriété Css border annule de la propriété de bordure d'image Css border-image[-*]

Si la propriété Css border est déclarée après une des propriétés Css border-image-* ou border-image alors cette propriété de bordure d'image n'est pas interprétée.
Dans ce cas, aucune des propriétés Css de bordures d'image ne sont pas interprétés.

Exemples de mixes border-image-* et border :

border-image-width : 30px;
border-image-slice : 30 ; 
border-image-outset : 56px;
border-image-source : url(bordure-image.png);
border : 10px solid red;

Dans ce cas, seule la propriété border-image-source est interprété.

Exemples de mixes border-image-* et border :

border-image-width : 30px;
border-image-slice : 30 ; 
border-image-outset : 56px;
border : 10px solid red;
border-image-source : url(bordure-image.png);

Voir le Influence de la propriété CSS border sur les propriétés CSS border-image-*

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

Détails des versions de la CSS border-image: Propriété border-image est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS border-image: Propriété CSS border-image plus ou moins compatible à partir de Chrome 15; Propriété CSS border-image plus ou moins compatible à partir de Firefox 15; Propriété CSS border-image est compatible à partir de Internet Explorer 11; Propriété CSS border-image plus ou moins compatible à partir de Opera 15; Propriété CSS border-image plus ou moins compatible à partir de Safari 6

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

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

Votes: 5 / 5 - 2 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css border-image

Définitions CSS annexes border-image

:first-letter: Le pseudo-élément CSS :FIRST-LETTER permet de spécifier des propriétés CSS pour la première lettre d'un élément dit de type bloc et si elle est précéd...[ :first-letter ]
border: La propriété de bordure CSS BORDER est un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la bord...[ border ]
border-collapse: La propriété CSS BORDER-COLLAPSE permet de spécifier si les bordures de la table et de ces cellules sont communes ou distinctes.Exemple d'écriture CSS...[ border-collapse ]
border-image-outset: La propriété de bordure d'image CSS BORDER-IMAGE-OUTSET est permet de spécifier le décalage de la bordure d'image Css d'un élément.Exemple d'écriture ...[ border-image-outset ]
border-image-repeat: La propriété de bordure d'image CSS BORDER-IMAGE-REPEAT permet de spécifier la manière dont se répète l'image pour les quatre bordures d'image Css d'u...[ border-image-repeat ]
border-image-slice: La propriété de bordure d'image CSS BORDER-IMAGE-SLICE qui permet de spécifier les diverses zones d'une image de bordure Css, qui vont constituer les ...[ border-image-slice ]
border-image-source: La propriété de bordure d'image CSS BORDER-IMAGE-SOURCE permet de mettre une image en bordure ou un dégradé de couleur linéaire en bordure image Css o...[ border-image-source ]
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 d'écriture...[ border-image-width ]