Attribut border-image CSS

Définition et utilisation

La propriété border-image est une propriété abrégée qui définit les propriétés suivantes :

Si la valeur est omise, la valeur par défaut est définie.

Conseil :Utilisez les attributs border-image-* pour construire des boutons extensibles beaux !

Voir également :

Tutoriel CSS3 :Bord CSS3

Exemple

Définir l'image comme la bordure entourant l'élément div :

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Essayez-le vous-même

Plus d'exemples en bas de la page.

Syntaxe CSS

border-image: source slice width outset repeat|initial|inherit;

Valeur de l'attribut

Valeur Description Test
border-image-source Le chemin d'accès à l'image utilisée dans la bordure.
border-image-slice Le décalage de l'image de bordure vers l'intérieur.
border-image-width La largeur de la bordure d'image.
border-image-outset La quantité de dépassement de la zone d'image de bordure au-delà de la bordure.
border-image-repeat La bordure d'image doit être répétée (repeated), arrondie (rounded) ou étirée (stretched). Test

Détails techniques

Valeur par défaut : none 100% 1 0 stretch
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.borderImage="url(border.png) 30 30 round"

Plus d'exemples

Bouton Border-image
cet exemple montre comment créer un bouton en utilisant la propriété border-image.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-