Édition Nº11 du 24 juillet 2012 — Retour au sommaire
Découverte de la propriété CSS border-image
Le paysage des propriétés CSS est changeant, en écho à leur fluctuations de popularité et aux évolutions du support par les navigateurs, et il n’est pas toujours simple de ne rien manquer. Cette semaine, Julia Buchner vous propose donc la découverte d’une propriété CSS méconnue et encore mal supportée mais pourtant prometteuse : border-image
.
Conducteur
En bossant sur une petite démo HTML / CSS, j’ai découvert une “nouvelle” propriété CSS : border-image
. En fait, découvert n’est pas le bon mot, il serait plus correct de dire que je me suis véritablement cassée les dents sur ladite propriété, tellement elle est difficile à utiliser.
À première vue, on pourrait croire que border-image
permet de définir une image pour chaque bordure d’un élément, un peu comme le border
traditionnel, avec ses variantes right
, left
, top
et bottom
. Ce serait trop simple !
En fait, cette propriété est un rêve pour les intégrateurs et développeurs ‘’front-end’’. Mais si, ça a bien dû déjà vous arriver, cette discussion designer-développeur, où le designer vous explique que sa maquette avec ses belles bordures, ça dépote tout question visibilité / ergonomie, et où le développeur répond que ça va être galère à intégrer. Et bien border-image
est fait pour ce genre de problématiques.
Par contre, cette fonctionnalité demande un peu de patience pour être maîtrisée. En voiture !
Syntaxe
Contrairement à ce qu’on pourrait penser, border-image
permet de découper une image en zones puis de l’appliquer sur un élément. Avant, si on tombait sur une boîte avec des bordures assez complexes, on pouvait découper l’image et la boîte en 9 parties (coins, longueurs et hauteurs) pour intégrer tout ça. Border-image
va le faire tout seul.
Cette propriété s’articule en cinq valeurs :
1 | border-image: source || slice || width || outset || repeat; |
Avant de se lancer dans cette propriété et tous ses attributs il faut d’abord définir la bordure en question. Tout le monde sait comment marche la propriété border, pas besoin de faire un rappel. Ne vous souciez pas trop des valeurs de cette déclaration, seule la largeur va être importante.
1 | border: double orange 27px; |
Cette première déclaration étant faite, nous pouvons nous lancer dans le premier attribut de la propriété, à savoir la source
.
Source
Ici, aucune difficulté particulière, l’attribut prend pour valeur une image de n’importe quelle type. Techniquement, on peut même y mettre du SVG, mais nous verrons plus tard que l’implémentation ne suit pas toujours les spécifications, qui sont encore au stade de brouillon.
Voici donc notre image d’exemple :
1 2 3 4 | div { border: double orange 1px; border-image-source: url(small-border.png); } |
Slice
Maintenant que l’image est définie, il va falloir la découper. Ca tombe bien, slice
veut dire « tranche » en anglais. C’est donc cet attribut qui va s’en charger. Il va prendre en paramètre un nombre positif, dont l’unité est le pixel, ou des pourcentages. Pour l’ordre d’application, ça fonctionne comme d’habitude (padding
, margin
, border
…) :
- 1 valeur : a pour
top
,right
,bottom
etleft
; - 2 valeurs : a pour
top
etbottom
, et b pourright
etleft
; - 3 valeurs : a pour
top
, b pourright
etleft
, c pourbottom
; - 4 valeurs : a pour
top
, b pourright
, c pourbottom
, d pourleft
.
Une petite grille d’exemple pour vous aider :

Pour notre image d’exemple, qui est assez régulière, ce sera simple. L’image fait 81 px sur 81 px, et est donc découpée en 9 carrés de 27 px de côté.
1 2 3 4 5 | div { border: double orange 1px; border-image-source: url(small-border.png); border-image-slice: 27; } |

Width
Maintenant, il va falloir définir la taille que l’image va prendre, soit le width
. Vous allez me dire que l’on a déjà défini cette taille avec l’attribut border
, mais en fait, c’est la bordure et non l’image qui a été définie. Ici, on va s’attaquer à l’image.
Par défaut, cet attribut récupère la taille de la bordure. Mais on peut y appliquer un pourcentage, une valeur ou un nombre multiplicateur. La valeur par défaut pour cet attribut est 1, cela signifie que la valeur du border-width
sera conservée.
1 2 3 4 5 6 | div { border: double orange 1px; border-image-source: url(small-border.png); border-image-slice: 27; border-image-width: 0.5; } |

Outset
L’avant dernier attribut de cette propriété, c’est l’outset
. Cela va correspondre à une forme de padding
appliqué à la bordure et qui va donc la pousser sans varier la taille de la boîte ni la forme du contenu. Sa valeur est soit un chiffre en 1 et 4, qui sera utilisé comme un multiplicateur du border-width
, soit une valeur en pixels.
Sa valeur par défaut est de 0.
1 2 3 4 5 6 7 | div { border: double orange 1px; border-image-source: url(small-border.png); border-image-slice: 27; border-image-width: 27px; border-image-outset: 26px; } |

Repeat
Dernières fonctionnalités mais pas des moindres, l’attribut repeat
va définir la manière dont va se répéter l’image une fois découpée et positionnée. Ici, il y a quatre valeurs différentes :
1 2 3 4 5 6 7 8 | div { border: double orange 27px; border-image-source: url(simple_border.png); border-image-slice: 27; border-image-width: 27px; border-image-outset: 26px; border-image-repeat: stretch; } |

1 2 3 4 5 6 7 8 | div { border: double orange 27px; border-image-source: url(simple_border.png); border-image-slice: 27; border-image-width: 27px; border-image-outset: 26px; border-image-repeat: repeat; } |

1 2 3 4 5 6 7 8 | div { border: double orange 27px; border-image-source: url(simple_border.png); border-image-slice: 27; border-image-width: 27px; border-image-outset: 26px; border-image-repeat: round; } |

1 2 3 4 5 6 7 8 | div { border: double orange 27px; border-image-source: url(simple_border.png); border-image-slice: 27; border-image-width: 27px; border-image-outset: 26px; border-image-repeat: space; } |

Cet attribut peut être déclaré de la même manière que slice
, soit en déclarant une valeur pour toutes les bordures, soit en définissant une valeur à une ou plusieurs bordures en particulier.
Compatibilité et autres joyeusetés
Après tant de merveilles, il est temps de parler de choses pénibles : la compatibilité.
Mauvaise nouvelle : cette propriété n’est compatible nativement qu’avec très peu de navigateurs. En fait, seulement Google Chrome. Et encore, son implémentation est encore imparfaite, vu qu’il ne gère pas le repeat round
.
Pour utiliser border-image
avec Firefox, Opera et Safari, il va falloir utiliser les préfixes correspondants et faire une croix sur certains attributs de cette fonctionnalité qui ne sont pas encore implémentés par ces navigateurs, comme l’outset
. Pour cela, il va falloir utiliser la « syntaxe abrégée » :
1 2 3 4 5 6 7 | div { border: double orange 27px; -webkit-border-image: url(simple_border.png) 27 27 round; -moz-border-image: url(simple_border.png) 27 27 round; -o-border-image: url(simple_border.png) 27 27 round; border-image: url(simple_border.png) 27 27px round; } |

La méthode de fonctionnement est simple quand vous connaissez tous les attributs :
1 | border-image: source slice width repeat; |
Énorme point noir au tableau, Internet Explorer 9 ne supporte pas cette fonctionnalité. On suppose que IE10 la supportera, mais cela reste une supposition. Il faudra donc tricher pour l’utiliser avec ce navigateur !
Conclusion
Pour conclure, border-image
est donc une propriété puissante et utilisable. Nous avons vu qu’elle permet de gérer le style des bordures de manière très pointue.
Le W3C fournit quelques exemples pour utiliser cette propriété, allant jusqu’à intégrer un P’tit Écolier. On peut aussi s’en servir pour mettre en avant certaines parties d’une image.
Au final, vous ne serez limité que par votre imagination si vous choisissez d’utiliser cette propriété… Votre imagination et l’intégration qu’en font les navigateurs. À vous de tester !
Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.
Alexandre B
#1
Le « border-image » est très prometteur, effectivement dommage qu’il y ai encore quelques bugs.
vivement dans 2 ans :D
Au passage, un bug que j’avais reporté il y a quelques temps,
me semble pas qu’il ai été corrigé.
http://code.google.com/p/chromium/issues/detail?id=127970&can=4&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
Goulven Champenois
#2
Très bonne introduction à cette propriété.
En complément, la traduction de CSS3 border-image détaille également le support de cette propriété par les différents navigateurs.
Jérôme S.
#3
Très bon article. Si je peux me permettre :
* attribut est masculin, cf « cette attribut » en fin de paragraphe « syntaxe »
* la légende de l’illustration pour border-image-repeat: space; est la même que pour border-image-repeat: round;
Julia Buchner
#4
Merci pour vos commentaires, ça fait plaisir.
Jérôme : vos corrections ont été ajoutés, merci beaucoup.