Propriété CSS border-image
Exemple
Spécifiez une image comme bordure autour d'un élément :
#borderimg {
border-image: url(border.png) 30 round;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La border-image
propriété vous permet de spécifier une image à utiliser comme bordure autour d'un élément.
La propriété border-image est une propriété abrégée pour :
- border-image-source
- bordure-image-tranche
- border-image-width
- border-image-outset
- border-image-repeat
Les valeurs omises sont définies sur leurs valeurs par défaut.
Valeur par défaut: | aucun 100% 1 0 étirement |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.borderImage="url(border.png) 30 tours" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Remarque : Voir la prise en charge de chaque navigateur pour chaque valeur ci-dessous.
Syntaxe CSS
border-image: source slice width outset repeat|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Différentes valeurs de tranche modifient complètement l'apparence de la bordure :
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Pages connexes
Tutoriel CSS : Images de bordure CSS
Référence CSS : propriété border-image-outset
Référence CSS : propriété border-image-repeat
Référence CSS : propriété border-image-slice
Référence CSS : propriété border-image-source
Référence CSS : propriété border-image-width
Référence HTML DOM : propriété borderImage