Border-image - Propriété CSS
Résumé des caractéristiques de la propriété border-image
Description de la propriété border-image.
border-image est une propriété résumée, qui permet de définir en une seule règle, les valeurs de toutes les propriétés relatives aux bordures-image :
border-image-source: Définit l'image utilisée pour construire la bordure.border-image-slice: Définit comment l'image de bordure est découpée.border-image-width: Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.border-image-outset: Définit le débordement de l'image de bordure.border-image-repeat: Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue.
Ces propriétés permettent de créer une bordure à partir d'une image. Autrement dit de remplacer le style de trait prédéfini (double, pointillé, etc) par une image. Les possibilités de création sont infinies.
L'image qui servira à construire la bordure sera divisée en 9 parties :
une pour chacun des quatre coins, pour chacun des quatre bords et une pour le centre.
La propriété border-image-slice définit comment l'image doit être découpée.
Les neuf parties ne sont pas forcément de dimensions identiques.
border-image-slice permet également de décider si la partie numéro 5 sera appliquée au fond de
l'élément. Dans le cas contraire, le fond de l'élément reste transparent.
Après ce découpage, les parties d'image sont redimensionnées par border-image pour correspondre à l'épaisseur de la bordure.
Elles peuvent ensuite être répétées ou étirées jusqu'à couvrir toute la longueur de la bordure : voir border-image-repeat.
Chacune des valeurs attribuées à border-image peut être différenciée pour les quatre côtés, sauf en ce
qui concerne la source. Dans ce cas les règles habituelles du CSS s'appliquent :
Une seule valeur indiquée : elle s'applique aux quatre côtés de l'élément.
Deux valeurs indiquées : la première s'applique aux côtés haut et bas, la deuxième aux côtés gauche et droit.
Trois valeurs indiquées : elles s'appliquent conformément au schéma ci-dessus : la deuxième valeur s'applique aux côtés gauche et droit.
Quatre valeurs indiquées : elles s'appliquent chacune à un des côtés de l'élément, en commençant par le bord du haut et en tournant dans le sens des aiguilles d'une montre.
Les bordures-images ne suivent pas les arrondis d'angle. La propriété border-radius est donc inopérante avec une bordure-image.
Si, sur un même élément, une bordure image ET une bordure classique sont définies, les règles de priorité du CSS définissent laquelle de ces deux bordures sera affichée. Les navigateurs ne sont pas censé superposer les deux bordures. Voir le tutoriel sur Les priorités.
Exemples de syntaxes.
- border-image: source slice / width / outset repeat;
Ceci est la syntaxe générale de border-image :
Les informations doivent être énumérées dans cet ordre mais les trois premières seulement sont obligatoires.
On voit que l'épaisseur de la bordure (width) et le décalage vers l'extérieur (outset) sont introduits par un caractère slash (/). - border-image: url('...') 200 / 15px;
Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage (
200pixels), et l'épaisseur de la bordure (15px). - border-image: url('...') 200 / 15px / 10px;
Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage, l'épaisseur de la bordure (après le premier
/), et enfin le décalage extérieur (après le deuxième/). - border-image: url('...') 20 15 30 12 / 15px 20px;
Bien entendu toutes ces valeurs peuvent être différentes pour chacun des côtés.
La syntaxe ci-dessus définit quatre valeurs pour découper l'image, et deux épaisseurs de bordure.
Valeurs communes à toutes les propriétés :
border-image: initial
border-image: inherit
border-image: revert
border-image: revertLayer
border-image: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemples.
Voici les images utilisées pour les exemples ci-dessous :
border-image-1.png45 x 45 pixels
border-image-2.png600 x 600 pixels
border-image-3.png172 x 164 pixels
fill a été ajoutée à border-image-slice.
l'arrière-plan de l'élément est donc rempli avec la partie centrale de l'image de bordure.border-image-repeat).
Prise en charge par les navigateurs.
La possibilité d'utiliser une image pour construire une bordure est maintenant bien prise en charge par les navigateurs. Les propriétés qui définissent cette bordure sont également bien reconnues.
border-image.Remarques :
(1) Supporte la propriété résumé mais pas les propriétés détaillées.
pour des bordures
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété border-image.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Introduction de la propriété résuméborder-imagepour définir les caractéristiques des nouvelles bordures réalisées avec des images.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi, au sujet des bordures.
La spécification du W3C "CSS Backgrounds and Borders Module" regroupe tout ce qui concerne les bordures et les arrière-plans.
La propriété border-image est décrite dans cette norme, avec les suivantes :