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.

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 le tableau de compatibilité (informations fournies par canIuse.com).

Voir aussi...

Bordures - Propriétés.

• border : Résumé des propriétés des bordures.
• border-collapse : Mode d'encadrement des cellules de tableau.
• border-color : Définit la couleur des bordures.
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• border-image-repeat : Mode de répétition de l'image de bordure.
• border-image-slice : Définit comment l'image de bordure est découpée.
• border-image-source : L'image utilisée pour construire la bordure.
• border-image-width : La largeur de la bordure image.
• border-radius : Rayon des angles arrondis.
• border-spacing : Espacement entre les cellules adjacentes dans un tableau.
• border-style : Type de bordure (simple, double, pointillé...).
• border-width : Epaisseur de la bordure.