Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété border-image

Description de la propriété border-image.

border-image est une propriété raccourcie, qui permet de définir en une seule règle, les valeurs de toutes les propriétés relatives aux bordures-image :

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é Object définit comment l'image doit être découpée. Les neuf parties ne sont pas forcément de dimensions identiques.

Découpage d'une image pour la propriété CSS border-image

Object 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 Object 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 Object.

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 (200 pixels), 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.

  • border-image: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Exemples.

Voici les images utilisées pour les exemples ci-dessous :

Propriété CSS Border-image
border-image-1.png
45 x 45 pixels
Propriété CSS Border-image
border-image-2.png
600 x 600 pixels
Propriété CSS Border-image
border-image-3.png
240 x 240 pixels

Cliquez sur les cadres ci-dessous pour afficher le CSS correspondant.

Exemple 1

Exemple 2

Exemple 3

Prise en charge par les navigateurs.

La propriété border-image est maintenant bien prise en charge par les navigateurs.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Bordures - Propriétés.