border-image-source CSS propriété

Définition de la CSS 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 ou un dégradé de couleur radial en bordure image Css.

border-image-source : url( image.gif );
border-image-source : linear-gradient( to bottom, #f0f9ff 0%,#a1dbff 100% );
border-image-source : radial-gradient( ellipse at center, #f0f9ff 0%,#a1dbff 100% );

La propriété de feuille de style border-image-source CSS peut prendre une des valeurs suivantes :

• none : pas d'image ou de dégradé en bordure d'images Css, valeur par défaut.
• url(url-image) : l'url de l'image de bordure Css, peut être relative ou absolue.
  Le point de départ de l'url relative de l'image est l'endroit où se trouve la feuille de style border-image-source.
• linear-gradient() : fonction Css pour faire un dégradé linéaire en bordure d'image Css.
• radial-gradient() : fonction Css pour faire un dégradé radial en bordure d'image Css.
• inherit : la bordure d'image Css hérite de la valeur du border-image-source de son parent.

Exemple de code border-image-source CSS

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

La propriété de bordure d'image CSS border-image-source 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'information qui donnent un sens à l'élément ou la page (accessibilité).

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

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

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

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

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