Propriété border-image-outset

La propriété border-image-outset permet de décaler la bordure en dehors des limites de l'élément. Comme valeur, on indique un nombre sans unité de mesure ou n'importe quelle unité de taille, sauf les pourcentages. Si un nombre sans unité est indiqué, il sert de multiplicateur par lequel sont multipliées les valeurs de la propriété border-width. Les valeurs négatives ne sont pas prises en charge.

Pour plus d'informations sur les images de bordure, consultez la propriété border-image.

Syntaxe

csssélecteur {
  border-image-outset: nombre positif;
}

Exemple . Nombre

Définissons la valeur de border-image-outset à 3 lors du survol de l'élément avec la souris. La bordure sera alors décalée de 26px*3 - soit 3 fois plus loin que sa largeur, définie dans border-width :

html<div id="elem"></div>

css#elem:hover {
  border-image-outset: 3;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 100px auto;
}

Результат:

Exemple . Pixels

Définissons la valeur de border-image-outset à 30px lors du survol de l'élément avec la souris. La bordure sera alors décalée de 30px :

html<div id="elem"></div>

css#elem:hover {
  border-image-outset: 30px;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 50px auto;
}

Результат:

Voir aussi