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-repeat - Propriété CSS

border-image-repeat

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

Description rapide
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Statut
Standard
Type de valeur
Valeur prédéfinie (une ou deux valeurs peuvent être indiquées).
Valeurs prédéfinies
stretch | repeat | round | space
Pourcentages
Ne s'appliquent pas.
Valeur initiale
stretch
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété border-image-repeat passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description.

La propriété border-image-repeat définit comment l'image de bordure est répétée ou déformée pour couvrir toute la bordure de l'élément.

Si une seule valeur est précisée, elle s'applique aux quatre bordures. Si deux valeurs sont précisées, la première concerne les bordures du haut et du bas ; la deuxième valeur concerne les bordures gauche et droite.

Pour en savoir plus sur l'utilisation d'images dans les bordures, reportez-vous à la propriété résumée border-image.

Syntaxes pour border-image-repeat.

border-image-repeat:
Schéma syntaxique de la propriété border-image-repeatSyntaxe de border-image-repeat (configuration d'une bordure-image) stretch stretch repeat repeat round round space space
;
  • border-image-repeat: stretch;

    Valeur par défaut. L'image est agrandie pour couvrir toute la zone de la bordure.

  • border-image-repeat: repeat;

    L'image est répétée jusqu'à couvrir la longueur de la bordure de chacun des côtés. La première et la dernière images peuvent être tronqués.

  • border-image-repeat: round;

    L'image est répétée jusqu'à couvrir la longueur de la bordure mais sans tronquer les images aux extrémités. L'image peut être redimensionnée pour couvrir la longueur exacte.

  • border-image-repeat: space;

    L'image est répétée jusqu'à couvrir la longueur de la bordure mais sans tronquer les images aux extrémités. Des espaces peuvent être insérés entre les images pour couvrir la longueur exacte.

  • border-image-repeat: repeat stretch;

    Lorsque deux valeurs sont précisées, séparées par un espace, elles sont interprétées de la façon suivante :

    • La première valeur s'applique aux bordures du haut et du bas, et à la dilatation horizontale de la partie centrale.
    • La deuxième valeur s'applique aux bordures de droite et de gauche, et à la dilatation verticale de la partie centrale.

    Les deux exemples ci-dessous sont obtenus avec la même image de bordure, mais le premier est dilaté dans le sens vertical (valeur stretch) alors que le deuxième est dilaté dans le sens horizontal.

    Image utilisée pour la bordure
    Image utilisée
    pour la bordure
  • border-image-repeat: initial; border-image-repeat: inherit; border-image-repeat: revert; border-image-repeat: revert-layer; border-image-repeat: unset;

    La valeur initiale est : stretch.

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

La propriété border-image-repeat ne traitant pas les valeurs numériques, son animation se fait de façon discontinue d'une valeur à l'autre. Le résultat suggère une enseigne lumineuse de magasin.

Manipulation de la propriété border-image-repeat par programme.

L'élément ci-dessous comporte une bordure-image. La modification de la valeur de border-image-repeat par l'un des exemples de codes ci-dessous est visible immédiatement sur l'affichage.

Modifier la valeur de border-image-repeat en Javascript.

Javascript accepte deux syntaxes pour l'écriture du nom de la propriété :

  • Avec la notation typique de css : un tiret pour séparer les mots (kebab-case).
  • Avec la notation plus courante en Javascript : une majuscule pour séparer les mots (camel-case).

function setBorderImageRepeat(el) {
el.style['border-image-repeat']='round';
// ou
el.style.borderImageRepeat='round';
}

Lire en Javascript la valeur de border-image-repeat.

Le code ci-dessous récupère la valeur de la propriété si cette dernière a été affectée directement à l'élément via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.


function getBorderImageRepeat(el) {
alert(el.style['border-image-repeat']);
// ou
alert(el.style.borderImageRepeat);
}

Lire la valeur calculée de border-image-repeat en Javascript.

La valeur calculée résulte de l'évaluation des règles de priorité et des héritages éventuels (voir les les règles de priorité). A défaut, la valeur calculée est la valeur initiale de la propriété (stretch dans le cas de border-image-repeat).


function getCalcBorderImageRepeat(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-image-repeat'));
}

Modifier la valeur de la propriété border-image-repeat avec JQuery.

Le nom de la propriété peut être écrit indifféremment en kebab-case ou en camel-case.


function setBorderImageRepeat(el) {
$(el).css('border-image-repeat','round');
// ou
$(el).css('borderImageRepeat','round');
}

Lire la valeur calculée de la propriété border-image-repeat avec JQuery.


function getCalcBorderImageRepeat(el) {
alert($(el).css('border-image-repeat'));
// ou
alert($(el).css('borderImageRepeat'));
}

Exemple interactif.

border-image-repeat :

Prise en charge par les navigateurs.

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

Colonne 1
Support de la propriété border-image-repeat.
Colonne 2
Support de la valeur round utilisée avec la propriété border-image-repeat.
Colonne 3
Support de la valeur space utilisée avec la propriété border-image-repeat.
1
border-image-repeat
2
round
3
space
Estimation de la prise en charge en pourcentage du parc actuel.
95%
95%
94%

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-repeat.

Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-repeat 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 le débordement de l'image de bordure.
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.