border-image-width

Exemple interactif

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

<section id="default-example">
  <div id="example-element">Ceci est une boîte entourée d'une bordure.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Si la valeur de cette propriété est supérieure à border-width, la bordure imagée s'étendra au-delà du remplissage (padding) voire du contenu.

Syntaxe

/* Valeur avec un mot-clé */
border-image-width: auto;

/* Valeurs de type <length> */
border-image-width: 1rem;

/* Valeurs de type <percentage> */
border-image-width: 25%;

/* Valeurs de type <number> */
border-image-width: 3;

/* côtés verticaux | horizontaux */
border-image-width: 2em 3em;

/* haut | côtés horizontaux | bas */
border-image-width: 5% 15% 10%;

/* haut | droit | bas | gauche */
border-image-width: 5% 2em 10% auto;

/* Valeurs globales */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

La propriété border-image-width est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.

• Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
• Lorsque deux valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés gauche et droit
• Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
• Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).

Valeurs

<length-percentage>

La largeur de la bordure, définie comme une longueur (<length>) ou un pourcentage (<percentage>). Les pourcentages sont relatifs à la largeur de la zone d'image de bordure pour les décalages horizontaux et à la hauteur de la zone d'image de bordure pour les décalages verticaux. Ne doit pas être négatif.

<number>

La largeur de la bordure, définie comme un multiple de la border-width correspondante. Ne doit pas être négatif.

auto

La largeur de la bordure est rendue égale à la largeur ou à la hauteur intrinsèque (selon le cas) de la border-image-slice correspondante. Si l'image ne possède pas la dimension intrinsèque requise, la border-width correspondante est utilisée à la place.

Définition formelle

Syntaxe formelle

border-image-width = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>  

Exemples

Réaliser un pavage avec une image de bordure

Dans cet exemple on crée une image de bordure en utilisant le fichier .png suivant, qui mesure 90 pixels par 90 pixels :

Chaque cercle sur l'image a un diamètre de 30 pixels.

HTML

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Arrière-plans et bordures
• Apprendre le CSS : arrière-plans et bordures
• Images de bordure dans CSS : un domaine clé pour l'Interop 2023 sur le blog MDN (2023)