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 :

border-image-outset - Propriété CSS

border-image-outset

Résumé des caractéristiques de la propriété border-image-outset

Description rapide
Définit le débordement de l'image de bordure.
Statut
Standard
Type de valeur
Dimension+ {1-4} | Entier+ {1-4}
Valeurs prédéfinies
0
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété border-image-outset passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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 de l'élément. La couleur du fond fait apparaître les limites de l'élément.

Attention ! décaler la bordure 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.

D'autre part, et pour cette même raison que l'élément n'est pas agrandi, les événements de souris qui se produisent sur la bordure, à l'extérieur de la surface normale de l'élément, ne seront pas traités. Si la bordure est fortement décalée, ceci peut être déroutant pour l'utilisateur. En déplaçant la souris sur l'exemple ci-dessous on voit que le curseur change de forme. Ceci indique la zone qui est sensible au clic. On constate qu'elle ne s'étend pas jusqu'à la bordure.
 

 

 

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

Syntaxes pour border-image-outset.

length est un nombre positif ou nul suivi d'une unité de dimension.
number est un nombre sans unité.
Ces syntaxes peuvent être répétées de 1 à 4 fois.

border-image-outset:
Schéma syntaxique de la propriété border-image-outsetSyntaxe de border-image-outset, propriété CSS length length number number {1,4} {1,4}
;
  • border-image-outset: 10px;

    Une valeur positive ou nulle, avec son unité de dimension (voir les unités CSS de dimension. 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.

    Les valeurs négatives sont interdites : il n'est donc pas possible de faire pénétrer la bordure à l'inté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: 2 10 15;

    De une à quatre valeurs peuvent se succéder, séparées par des espaces.

    • Si une seul valeur est présente, elle s'applique à tous les côtés de l'élément/li>
    • Si deux valeurs sont présentes, la première s'applique aux côtés haut et bas, la deuxième aux côtés gauche et droit.
    • Si trois valeurs sont définies, 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.
    • Enfin, si quatre valeurs sont définies, elles s'appliquent successivement aux côtés haut, droit, bas et gauche.
    Syntaxe avec une seule valeur Syntaxe avec deux valeurs Syntaxe avec trois valeurs Syntaxe avec quatre valeurs
  • border-image-outset: initial; border-image-outset: inherit; border-image-outset: revert; border-image-outset: revert-layer; border-image-outset: unset;

    La valeur initiale est : 0.

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

La propriété border-image-outset peut être animée pour donner un effet de 'respiration', sans que les autres éléments de la page ne soient impactés.

Attention ! Il y a un petit piège dans l'écriture de la directive @keyframes. Dans la mesure où border-image-outset accepte des nombres sans unité ET des nombres avec une unité de dimension, il faut veiller à ce que la clause from et la clause to soient bien exprimées dans la même unité. C'est particulièrement trompeur avec la valeur 0 qui, d'habitude, peut être écrite sans unité sans que cela pose de problème. Mais ici, le code suivant ne générera pas une animation progressive de 0 à 20 pixels.

@keyframes xxx { from {border-image-outset:0;} /* erreur */ to {border-image-outset:20px;} }

Exemple interactif.

border-image-outset :

Prise en charge par les navigateurs.

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

1
border-image-outset
Estimation de la prise en charge en pourcentage du parc actuel.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que border-image-outset.

Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-outset fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.