La propriété CSS3 border-image

La propriété border-image est une des propriétés introduites dans CSS3 pour permettre aux images d’être utilisées sur les bordures des éléments.

Les propriétés CSS

Définition et utilisation de la propriété CSS3 border-image

La propriété border-image vous permet de spécifier une image à utiliser pour définir  la frontière normale autour d'un élément.

La propriété border-image est une propriété raccourcie pour définir le border-image-source, border-image-slice , border-image-width, border-image-outset et les propriétés border-image-repeat.

Les valeurs omises sont définies à leurs valeurs par défaut.

Valeur par défaut : aucun 100 % 1 0 stretch
Héritée : No
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet.style.borderImage="url(image.png) 25 rond"

Remarque : la définition d’une frontière image remplacera toute frontière qui a été défini  en utilisant les propriétés de border-style . Toutefois, si l'image ne peut pas être chargé, ou si la valeur de border-image est none, les styles de bordure y seront substitués.

Appui de navigateur de la propriété  border-image

Les nombres dans le tableau spécifient la version à partir de laquelle  le navigateur prend totalement en charge la propriété border-image.

Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné  avec ce préfixe.

Propriété  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
border-image 16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-

Syntaxe CSS de la propriété border-image

border-image: source slice width outset repeat|initial|inherit;

La syntaxe ci-dessus est généralement utilisée pour écrire le moins de code possible, mais on peut aussi définir chaque valeur (source slice width outset repeat) séparément comme on va le voir plus loin. 

Valeurs de la propriété   border-image

Valeur Description
border-image-source Le chemin de l'image à utiliser en tant que bordure
border-image-slice Comment découper l'image de la frontière
border-image-width La largeur de l'image de la frontière
border-image-outset Spécifie la quantité par laquelle la zone d'image de frontière s'étend au-delà de la zone  frontalière.
border-image-repeat Que l'image de la frontière devrait être répété, arrondie ou allongée
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent.

Remarque : la propriété border-image s’applique à tous les éléments, sauf les éléments internes de  table lorsque border-collapse  est sur collapse. Il s'applique également au pseudo élément  ::first-letter.

Exemple utilisation de la propriété border-image

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  #borderimg1 {
      border: 1em solid transparent;
                      padding: 10px;
      -webkit-border-image: url(images/border1.jpg) 30 round; /* Safari
  3.1 à 5 */
      -o-border-image: url(images/border1.jpg) 30 round; /* Opera 11 à
  12.1 */
      border-image: url(images/border1.jpg) 30 round;
  }
  #borderimg2 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border2.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border2.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border2.jpg) 10% round;
  }
  #borderimg3 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border3.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border3.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border3.jpg) 10% round;
  }
  img{height: 150px;
  }
  </style>
  </head>
  <body>
  <p id="borderimg1">border-image: url(images/border1.jpg) 330
  round;</p>
  <p id="borderimg2">border-image: url(images/border2.jpg) 10%
  round;</p>
  <p id="borderimg3">border-image: url(images/border3.jpg) 10%
  round;</p>
  <p><strong>Remerque:</strong> Internet Explorer 10,
  et les versions antérieures, ne supportent pas la propriété
  border-image.</p>
  <p> Voici les images utilisées:</p>
  <p> <img src="http://www.oujood.com/propriete-css/images/border1.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="http://www.oujood.com/propriete-css/images/border2.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="http://www.oujood.com/propriete-css/images/border3.jpg" alt="" /> </p>
  </body>
  </html>

 

La propriété CSS3 border-image-source

Définition et utilisation de la propriété border-image-source

La propriété border-image-source spécifie le chemin d'accès à l'image qu’on veut utiliser comme frontière (au lieu de la frontière normale) autour d'un élément.

Astuce : Si la valeur est « none », ou si l'image ne peut pas être affichée, les styles de bordure seront utilisés.

Valeur par défaut : none
Héritée : no
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet.style.borderImageSource="url(image.png)"

Syntaxe CSS de la propriété border-image-source

border-image-source: none|image|initial|inherit;

none Spécifie qu'aucune image ne doit être utilisé.

image Spécifie l'emplacement de l'image à utiliser. Par exemple, http://www.nomDomaine.com/images/monimage.png

 

Valeurs de propriété de la propriété border-image-source

Valeur Description
none Pas dimage
image Le chemin de l’image à uiliser comme bordure
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent.

 

La propriété CSS3 border-image-slice

 

La propriété border-image-slice  spécifie comment découper l'image spécifiée par border-image-source. L'image est toujours découpé en neuf sections : quatre coins, quatre bords et un milieu.

 

La partie « milieu » est considérée comme entièrement transparente, sauf si le mot clé de fill est défini.

 
Valeur par défaut : 100 %
Héritée : no
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet.style.borderImageSlice="25%"

Syntaxe CSS de la propriété border-image-slice

border-image-slice: nombre|%|fill|initial|inherit;

Remarque : La propriété border-image-slice peut prendre d'une à quatre valeurs. Si la quatrième valeur est omise, elle prend la même valeur que la seconde. Si la troisième est également omise, elle prend la même valeur   que la première. Si la seconde  est également omise, elle prend la même valeur que la première.

Valeurs de la propriété border-image-slice

Valeur Description
Nombre Représente la distance en pixels de l'image pour des images raster ou vecteur de coordonnées pour les images vectorielles.
% Les pourcentages sont par rapport à la hauteur ou la largeur de l'image
fill Si indiqué la partie centrale de l'image sera affichée
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent.
 

CSS3 la propriété border-image-outset

La propriété border-image-outset CSS est utilisée pour définir la valeur  par laquelle la zone frontière de l'image s'étend au-delà de la zone frontalière.

La propriété border-image-outset est utilisée en conjonction avec le border-image-source, border-image-slice , border-image-width et la  propriétés border-image-repeat afin de déterminer comment l'image s'affichera sur la frontière.

Valeur par défaut : 0
Héritée : no
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet. style.borderImageOutset="25px"
 

Syntaxe CSS de la propriété border-image-outset

border-image-outset: [ <long> | <nombre> ]{1,4}

Comme l’indique la formule ci-dessus on peut utiliser une à 4 valeurs pour définir les valeurs pour chaque coté.

<nombre> : Une valeur numérique en pixel qui représente un multiple de la border-width .

< long > : Une valeur de longueur qui spécifie une quantité fixe. Par exemple, 0.9em

Exemple une valeur pour définir la même valeur pour les quatre cotés à la fois.

border-image-outset: 1em;

 Exemple 2 valeurs pour spécifier les valeurs horizontales et verticale séparément :

border-image-outset: 10px  8px;

Exemple 3Valeurs pour spécifier des valeurs du haut, vertical et du bas séparément :

border-image-outset: 1em 0.8em 1.1em;

Exemple 4 valeurs pour spécifier les valeurs des quatre côtés séparément : border-image-outset: top right bottom left

border-image-outset: 1em 0.9em 1.1em 0.8em;

Définition et utilisation de la propriété CSS3 border-image-width

La propriété border-image-width spécifie la largeur de l'image de la frontière.

Valeur par défaut : 1
Héritée : no
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet. style.borderImageWidth="20px" 

Syntaxe CSS de la propriété border-image-width

border-image-width: number|%|auto|initial|inherit;

Remarque : La propriété border-image-width peut prendre jusqu’à quatre valeurs (haut, droite, bas et côté gauche). Si la quatrième valeur est omise, elle prend la même valeur que la seconde. Si la troisième est également omise, elle prend la même valeur   que la première. Si la seconde  est également omise, elle prend la même valeur que la première. 

Valeurs la propriété border-image-width

Valeur Description
length Une unité de longueur (px) pour définir la taille de la bordure
number La valeur par défaut est 1. Représente des multiples de la largeur de la frontière correspondant
% En se référant à la taille de zone frontalière de l'image: la largeur de la zone pour les décalages horizontaux ou la hauteur des décalages verticaux
auto Si spécifié, la largeur est la largeur ou la hauteur intrinsèque de la tranche d'image correspondant
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent.

 

Définition et utilisation de la propriété border-image-repeat

La propriété border-image-repeat spécifie si l'image de la frontière devrait être répété, arrondi ou étirée.

Valeur par défaut : Stretch
Héritée : no
Animer : Non
Version: CSS3
Syntaxe JavaScript : objet. style.borderImageRepeat="round"

Syntaxe CSS de la propriété border-image-repeat

 

border-image-repeat: stretch|repeat|round|initial|inherit;

Remarque : Cette propriété spécifie comment les images pour les côtés et la partie centrale de l'image utilisée pour  la frontière sont mis à l'échelle. Ainsi, vous pouvez spécifier jusqu’à deux valeurs. Si la deuxième valeur est omise, elle la même valeur que la première.

Valeurs de propriété

Valeur Description
stretch Valeur par défaut. L'image est étirée pour remplir la zone définie
repeat L'image est en carrelée (répété) pour remplir la zone
round L'image est en mosaïque (répété) pour remplir la zone. Si elle ne remplit pas la zone avec un nombre entier de carreaux, l'image est redimensionnée afin de l'adapter
space L'image est en mosaïque (répété) pour remplir la zone. Si elle ne remplit pas la zone avec un nombre entier de carreaux,  l'espace supplémentaire qui reste est distribuée autour des carreaux
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent.

Exemple

Sélectionner le code

  <!doctype html>
  <html>
  <head>
  <style type="text/css">
  .cool-border {
  width:200px;
  height:60px;
  padding:10px;
  border: 1em double #edb742;
  /* CSS3 */
  border-image-source: url(images/border1.jpg);
  border-image-slice: 30;
  border-image-width: 0.5em 1em;
  border-image-outset: 0;
  border-image-repeat: round;
  /* Safari et Chrome */
  -webkit-border-image-source: url(images/border1.jpg);
  -webkit-border-image-slice: 30;
  -webkit-border-image-width: 0.5em 1em;
  -webkit-border-image-outset: 0;
  -webkit-border-image-repeat: round;
  /* Firefox */
  -moz-border-image-source: url(images/border1.jpg);
  -moz-border-image-slice: 30;
  -moz-border-image-width: 0.5em 1em;
  -moz-border-image-outset: 0;
  -moz-border-image-repeat: round;
  /* Internet Explorer */
  -ms-border-image-source: url(images/border1.jpg);
  -ms-border-image-slice: 30;
  -ms-border-image-width: 0.5em 1em;
  -ms-border-image-outset: 0;
  -ms-border-image-repeat: round;
  /* Opera */
  -o-border-image-source: url(images/border1.jpg);
  -o-border-image-slice: 30;
  -o-border-image-width: 0.5em 1em;
  -o-border-image-outset: 0;
  -o-border-image-repeat: round;
  }
  </style>
  </head>
  <body>
  <div class="cool-border">
  This box has a cool border?
  </div>
  </body>
  </html>

 

 
Par Gerywa 11 Janvier 2016
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Comment intégrer le système de paiement PayPal en PHP et MySQL

    Le système de paiement est indispensable pour les sites Web qui ont quelque chose à vendre sur leur site et l'intégration du système de paiement dans votre site Web rend l'ensemble du processus si facile.

    Balise paragraphe p

    Définit un paragraphe

    before

    Ajoute le contenu avant un élément