Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété border-image-outset

Description de la propriété border-image-outset.

border-image-outset définit un décalage de la bordure-image vers l'extérieur de l'élément. Elle accepte de une à quatre valeurs:

  • Si une seule valeur est précisée, elle s'applique aux quatre cotés.
  • Si deux valeurs sont précisées, la première définit le débordement des bordures haute et basse ; la deuxième des bordures gauche et droite.
  • Si trois valeurs sont indiquées, la première définit le débordement de la bordure du haut, la deuxième celle des cotés droite et gauche et la dernière le débordement sur la bordure du bas.
  • Enfin, lorsque les quatre valeurs sont indiquées, elles correspondent respectivement au débordement sur les cotés haut, droit, bas et gauche.

Sur l'exemple : ci-après la bordure image a été décalée de 20 pixels vers l'extérieur.

Attention ! décaler l'image ne change rien aux dimensions de l'élément, et donc en conséquence ne provoque pas un décalage des éléments qui suivent. La bordure image peut donc entrer en collision avec d'autres éléments.

Pour une présentation générale de l'utilisation d'images dans les bordures, reportez-vous à la propriété raccourcie border-image.

Syntaxes pour border-image-outset.

  • border-image-outset: 10px;

    Une valeur positive ou nulle, avec son unité de dimension (voir les unités de dimensions en CSS. La valeur par défaut est 0. La bordure-image sera décalée de la valeur indiquée, vers l'extérieur de l'élément.

  • border-image-outset: 2;

    Une valeur positive ou nulle, sans unité. Cette valeur est un multiple de la largeur de la bordure (border-width).

  • border-image-outset: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

border-image-outset :

Prise en charge par les navigateurs.

La propriété border-image-outset ainsi que toutes les propriétés relatives aux images de bordure sont correctement prises en charge par les navigateurs.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Bordures - Propriétés.