Image de bordure CSS

Image de bordure CSS

En utilisant CSS border-image Propriété qui permet de définir l'image utilisée comme bord autour de l'élément.

Propriété border-image CSS

CSS border-image Cette propriété vous permet de spécifier l'image à utiliser plutôt que de couvrir un bord ordinaire.

Cette propriété comporte trois parties :

  • Image utilisée comme bord
  • Où découper l'image
  • Définir où répéter ou étirer la partie centrale

Nous utiliserons cette image ("border.png")

border-image Cette propriété accepte une image, la coupe en neuf parties, comme un plateau de jeu de cross. Ensuite, placez les coins aux coins et répétez ou étirez la partie centrale selon vos réglages.

Attention :Pour que border-image Agit, l'élément doit également être configuré border Propriété !

Ici, la partie centrale de l'image est répétée pour créer un bord :

L'image en tant que bord !

Voici le code :

Exemple

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Essayez-le vous-même

Ici, la partie centrale de l'image est étirée pour créer un bord :

L'image en tant que bord !

Voici le code :

Exemple

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Essayez-le vous-même

Astuce :border-image Cette propriété est en réalité une abréviation des propriétés suivantes :

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - différentes valeurs de découpe

Différentes valeurs de découpe changeront complètement l'apparence du bord :

Exemple 1 :

border-image: url(border.png) 50 round;

Exemple 2 :

border-image: url(border.png) 20% round;

Exemple 3 :

border-image: url(border.png) 30% round;

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;
}

Essayez-le vous-même

Propriété d'image de bord CSS

Propriété Description
border-image Propriété abrégée utilisée pour configurer toutes les propriétés border-image-*.
border-image-source Définit le chemin de l'image utilisée pour le bord.
border-image-slice Détermine comment couper l'image de bord.
border-image-width Détermine la largeur de l'image de bord.
border-image-outset Détermine la quantité par laquelle l'image de bord dépasse le boîtier de bordure.
border-image-repeat Détermine si l'image de bord doit être répétée, arrondie ou étirée.