Images de bordure CSS

Table des matières

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

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é comprend trois parties :

L'image à utiliser comme bordure
Où découper l'image
Définir si les sections médianes doivent être répétées ou étirées

Nous utiliserons l'image suivante (appelée "border.png") :

La propriété border-image prend l'image et la découpe en neuf sections, comme un jeu de tic-tac-toe. Il place ensuite les coins aux coins, et le les sections centrales sont répétées ou étirées comme vous le spécifiez.

Remarque : Pour que border-image fonctionne, l'élément a également besoin du Propriété border !

Ici, les sections centrales de l'image sont répétées pour créer la bordure :

An image as a border!

Voici le code :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

Ici, les sections centrales de l'image sont étirées pour créer la bordure :

An image as a border!

Voici le code :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

Astuce : La propriété border-image est en fait une propriété abrégée pour les propriétés :

border-image-source
border-image-slice
border-image-width
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 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 →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

Propriétés de l'image de bordure CSS

border-image: Une propriété raccourcie pour définir toutes les propriétés border-image-*
border-image-source: Spécifie le chemin d'accès à l'image à utiliser comme bordure
border-image-slice: Spécifie comment découper l'image de bordure
border-image-width: Spécifie les largeurs de l'image de bordure
border-image-outset: Spécifie la quantité par laquelle la zone de l'image de bordure s'étend au-delà de la zone de bordure
border-image-repeat: Spécifie si l'image de bordure doit être répétée, arrondie ou étirée