Propriété border-image

La propriété border-image définit une image pour la bordure, c'est une propriété raccourcie pour les propriétés border-image-source, border-image-slice, border-image-repeat, border-image-width et border-image-outset. La propriété raccourcie est apparue dans CSS avant les propriétés détaillées et donc est supportée par un plus grand nombre d'anciens navigateurs.

Syntaxe

sélecteur {
	border-image: url(chemin vers l'image) décalage/épaisseur/décalage_extérieur répétition;
}

Description

L'image que nous souhaitons appliquer à la bordure doit être conçue de manière spéciale : 4 mini-images pour les coins et 4 images pour les côtés. Exemple d'une telle image :

Dans ce cas, la partie centrale est laissée blanche (car nous ne voulons pas qu'elle apparaisse sur le fond de l'élément). Exemple d'image avec une partie centrale remplie :

La valeur slice indique au navigateur quelles parties de l'image iront dans les coins, et lesquelles iront sur les côtés (et quelle partie sera centrale). Les coins reçoivent 4 parties, les côtés reçoivent 4 parties et une partie (centrale) va sur le fond de l'élément (optionnellement, mot-clé fill).

L'image est "découpée" en morceaux de la manière suivante : pour la valeur slice, on spécifie une à quatre valeurs. Analysons avec un exemple. Supposons les valeurs suivantes : 10 20 30 40 (les pixels px ne sont pas spécifiés, car l'image peut être aussi bien matricielle que vectorielle). Les valeurs indiquent ceci : 10 à couper en haut, 20 à couper à droite, 30 à couper en bas, 40 à couper à gauche. Quelle partie de l'image ira dans le coin supérieur gauche ? Ce sera le morceau : 10 en haut, 40 à gauche. Dans le coin supérieur droit ira 10 en haut, 20 à droite. Et ainsi de suite.

Le plus souvent, l'image est symétrique (comme les losanges ci-dessus) et nous devons couper des morceaux égaux pour les coins. Dans ce cas, une seule valeur est spécifiée, qui définira les mêmes décalages de tous les côtés. Pour couper les losanges oranges, nous indiquerons slice à 26 (car le losange orange a une taille de 26px sur 26px). Les losanges jaunes iront sur les lignes de la bordure et il leur arrivera ceci : ils seront soit étirés sur tout le bloc, soit répétés le long de la bordure (cela dépend de la valeur repeat) :

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

La propriété border-image ne permet pas de spécifier l'épaisseur de la bordure de l'élément. Le navigateur étire simplement l'image le long de la bordure avec la largeur déjà existante. Il faut donc la définir via la propriété border.

Les utilisateurs de navigateurs anciens (ou avec les images désactivées) verront le cadre standard, défini dans border, il est donc judicieux de lui définir un style et une couleur appropriés.

Valeurs

Valeur	Description
url(Chemin vers l'image)	Chemin vers l'image. Pour plus de détails, voir `border-image-source`.
décalage	Indique au navigateur quelles parties de l'image iront dans les coins, lesquelles iront sur les côtés (et quelle partie sera centrale). Valeurs possibles : de `1` à `4` nombres \| de `1` à `4` pourcentages. Un espace peut permettre de spécifier le mot-clé `fill` en plus des nombres ou pourcentages. Pour plus de détails, voir `border-image-slice`.
épaisseur	Cette propriété contrôle la largeur visible du cadre, la met à l'échelle. Si cette valeur est supérieure à la largeur de `border-width`, l'image du cadre empiétera sur le contenu. Valeurs possibles : unités CSS \| pourcentages \| nombre \| `auto`. Pour plus de détails, voir `border-image-width`.
décalage_extérieur	Propriété intéressante, permettant de déplacer le cadre en dehors des limites de l'élément. Les valeurs négatives ne sont pas supportées. Valeurs possibles : unités CSS (sauf % (?)) \| nombre positif \| auto. Pour plus de détails, voir `border-image-outset`.
répétition	Indique comment répéter l'image sur les bordures (pas sur les coins) : carreler ou étirer. Valeurs possibles : `stretch` \| `repeat` \| `round` \| `space`. Pour plus de détails, voir `border-image-repeat`.

Valeur par défaut : none 100%/1/0 stretch (url(chemin vers l'image) décalage/épaisseur/décalage_extérieur répétition).

Exemple . border-image-repeat: valeur repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . border-image-repeat: valeur stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . border-image-repeat: valeur round

Actuellement, à l'état normal, la valeur repeat est définie, et au survol - round. Remarquez qu'avant le survol la bordure ne contient pas un nombre entier de losanges, alors qu'après le survol - si. C'est ainsi que fonctionne round :

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . border-image-repeat: deux mots

Valeur repeat pour la largeur et stretch pour la hauteur :

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . Correspondance entre la largeur de l'image et la largeur de la bordure

Augmentons border-width au survol de la souris, tout en laissant l'épaisseur de border-image identique. Les losanges s'étireront sur toute la bordure :

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . border-image-slice

Prenons une autre image, dans laquelle les différents morceaux ne sont pas égaux :

Spécifions quelles parties de l'image doivent être coupées - 25% 30% 10% 20%. Cela fonctionne ainsi : 25% - décalage en haut, 30% - décalage à droite, 10% - décalage en bas, 20% - décalage à gauche. En fait, avec ces morceaux, nous coupons les coins. Le coin supérieur gauche sera 25% du haut de l'image, et 20% de la gauche. Le coin supérieur droit sera 25% du haut de l'image, et 30% de la droite et ainsi de suite.

De plus, si vous survolez le bloc avec la souris, le mot-clé fill s'activera, et la partie centrale de l'image deviendra le fond de notre bloc :

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Exemple

Créons une bordure dégradée avec un dégradé linéaire :

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Exemple . border-image-width

Définissons la valeur border-image-width à 2 (l'image de la bordure deviendra 2 fois plus grande que la bordure elle-même) au survol de la souris sur l'élément (26/2 - spécifié après la barre oblique, où 26 est la valeur de border-image-slice). Remarquez que la bordure elle-même n'a pas augmenté, mais l'image de la bordure - si, car elle empiétera sur le texte :

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple . border-image-outset

Définissons la valeur border-image-outset à 3 au survol de la souris sur l'élément. (26/1/2 - spécifié après la deuxième barre oblique, où 26 est la valeur de border-image-slice, et - 1 - border-image-width) :

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voir aussi

la propriété border-image-source,
qui définit le chemin vers l'image pour la bordure
la propriété border-image-slice,
qui définit le découpage de l'image pour la bordure
la propriété border-image-repeat,
qui définit la répétition de l'image pour la bordure
la propriété border-image-width,
qui définit la taille de l'image pour la bordure
la propriété border-image-outset,
qui définit le décalage de l'image pour la bordure