Propriété border-image-outset

La propriété border-image-outset permet de décaler la bordure en dehors des limites de l'élément. Comme valeur, on indique un nombre sans unité de mesure ou n'importe quelle unité de taille, sauf les pourcentages. Si un nombre sans unité est indiqué, il sert de multiplicateur par lequel sont multipliées les valeurs de la propriété border-width. Les valeurs négatives ne sont pas prises en charge.

Pour plus d'informations sur les images de bordure, consultez la propriété border-image.

Syntaxe

sélecteur {
	border-image-outset: nombre positif;
}

Exemple . Nombre

Définissons la valeur de border-image-outset à 3 lors du survol de l'élément avec la souris. La bordure sera alors décalée de 26px*3 - soit 3 fois plus loin que sa largeur, définie dans border-width :

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

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

Exemple . Pixels

Définissons la valeur de border-image-outset à 30px lors du survol de l'élément avec la souris. La bordure sera alors décalée de 30px :

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

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

Voir aussi

la propriété border-image,
qui est un raccourci pour la bordure-image
la propriété border-image-source,
qui définit le chemin de l'image pour la bordure
la propriété border-image-slice,
qui découpe l'image pour la bordure
la propriété border-image-repeat,
qui répète l'image pour la bordure
la propriété border-image-width,
qui définit la taille de l'image pour la bordure