Attribut BORDER-IMAGE
Rôle
L’attribut border-image permet d’utiliser une image en guise de bordure.
Cette image va subir 9 découpes, les quatres découpes en noir seront placés sur les coins de la bordure, les quatres découpes intermédiaires en orange rempliront les bordures sur les cotés, la partie centrale sera souvent exclue.
Cet attribut est le raccourci de border-image-source qui spécifie la source de l’image, border-image-width qui spécifie l’épaisseur de la bordure, border-image-repeat qui spécifie comment les images (découpées en orange) vont se répéter sur la largeur et la hauteur du bloc HTML, border-image-slice qui spécifie le décalage vers le centre de l’image des repères 9 découpes, border-image-outset qui place la bordure en dehors des bords du bloc HTML.
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.borderImage
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
body{
padding: 10px;
}
div{
float: left;
margin-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color:silver;
width: 300px;
height: 100px;
padding: 20px;
border: solid 10px transparent;
border-image-source: url(//tutowebdesign.com/images/border-image-css.jpg);
border-image-width: 20px;
border-image-repeat: round;
border-image-slice: 30 30;
border-image-outset: 0;
}
section{
position: absolute;
width: 300px;
height: 100px;
border: thin solid red;
}
– Le code HTML
<section></section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime et reiciendis ullam,</div>
<img src="//tutowebdesign.com/images/border-image-css.jpg" alt="">
Résultat
L’image de droite est l’image originale pour réaliser la bordure
Compatibilité
15.0+ 
15.0+ 
11.0+ 
6.0+ 
15.0+
L’attribut border-image est pris en charge par les versions récentes des principaux navigateurs.
Valeurs
Les différentes valeurs de l’attribut border-image sont:
- La source de l’image
- Voir border-image-source
- L’épaisseur de la bordure
- Voir border-image-width
- La répétition de la bordure
- Voir border-image-repeat
- Le décalage sur les repères neuf découpes
- Voir border-image-slice
- L ‘extension de la bordure au delà des bords du conteneur HTML
- Voir border-image-outset
- initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
border-image : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
border-image : inherit
A voir aussi
border-image box-sizing clip height width margin padding overflowmax-width min-width outline resize
