Images de bordure CSS
Images de bordure CSS
Avec la propriété CSS border-image
, vous pouvez définir une image à utiliser comme bordure autour d'un élément.
Propriété CSS border-image
La propriété CSS border-image
vous permet de spécifier une image à utiliser à la place de la bordure normale autour d'un élément.
La propriété comporte trois parties :
- L'image à utiliser comme bordure
- Où découper l'image
- Définir si les sections du milieu doivent être répétées ou étirées
Nous utiliserons l'image suivante (appelée "border.png") :
La border-image
propriété prend l'image et la découpe en neuf sections, comme une planche de tic-tac-toe. Il place ensuite les coins aux coins et les sections du milieu sont répétées ou étirées comme vous le spécifiez.
Remarque : Pour border-image
fonctionner, l'élément a également besoin de la
border
propriété définie !
Ici, les sections centrales de l'image sont répétées pour créer la bordure :
Une image comme bordure !
Voici le code :
Exemple
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Ici, les sections centrales de l'image sont étirées pour créer la bordure :
Une image comme bordure !
Voici le code :
Exemple
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Astuce : La border-image
propriété est en fait une propriété abrégée pour les
propriétés border-image-source
, border-image-slice
, border-image-width
et
.border-image-outset
border-image-repeat
CSS border-image - Différentes valeurs de tranche
Différentes valeurs de tranche modifient complètement l'apparence de la bordure :
Exemple 1:
border-image : url(border.png) 50 rond ;
Exemple 2 :
border-image : url(border.png) arrondie à 20 % ;
Exemple 3 :
border-image : url(border.png) 30 % rond ;
Voici le code :
Exemple
#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;
}
Propriétés de l'image de bordure CSS
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |