Border-image-repeat - Propriété CSS
Résumé des caractéristiques de la propriété border-image-repeat
stretch | repeat | round | spacestretchborder-image-repeat passe d'une valeur à l'autre sans transition.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de border-image-repeat.
border-image-repeat.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété border-image-repeat.
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.
Autres propriétés relatives aux bordures images.
Valeurs pour border-image-repeat.
Dans tous les exemples qui suivent, l'image utilisée pour créer la bordure est la suivante :
- 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.border-image-repeat:round stretchborder-image-repeat:stretch round - border-image-repeat: initial; (
stretch) border-image-repeat: inherit; border-image-repeat: revert; border-image-repeat: revert-layer; border-image-repeat: revert-rule; border-image-repeat: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,revert-rule,unset.
Exemple d'animation de 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.
Accéder à la propriété border-image-repeat par programme.
Changer la répétition de l'image de bordure avec 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).
let el = document.getElementById('id');
el.style['border-image-repeat'] = 'round';
// ou
let el = document.getElementById('id');
el.style.borderImageRepeat = 'round';
Lire la répétition de l'image de bordure avec Javascript.
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.
let el = document.getElementById('id');
el.style['border-image-repeat'] = 'round';
// ou
let el = document.getElementById('id');
el.style.borderImageRepeat = 'round';
Avec Javascript, lire la valeur calculée de border-image-repeat.
La valeur calculée résulte de l'évaluation des règles de priorité et des héritages éventuels (voir les Les priorités).
A défaut, la valeur calculée est la valeur initiale de la propriété (stretch dans le cas de border-image-repeat).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-image-repeat');
Avec JQuery, lire ou modifier la valeur de border-image-repeat.
Le nom de la propriété peut être écrit indifféremment en kebab-case ou en camel-case.
// Lire la valeur :
$('#id').prop('border-image-repeat');
// Écrire la valeur :
$('#id').prop('border-image-repeat', 'round');
$('#id').prop('{border-image-repeat': 'round'});
Avec JQuery, lire la valeur calculée de border-image-repeat.
let value = $('#id').css('border-image-repeat');
Autres exemples.
Vous trouverez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.
Testez vous-même.
Utilisez les boutons ci-dessous pour examiner comment est mémorisée (sérialisée) la propriété border-image-repeat. Dans le cas de cette propriété la valeur
affectée et la valeur calculée seront identiques, sauf en cas de saisie d'une valeur incorrecte. Dans ce cas, la valeur affectée est vide,
tandis que la valeur calculée est la valeur initiale de la propriété (stretch).
Exemple interactif avec la propriété border-image-repeat.
Compatibilité des navigateurs avec border-image-repeat.
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.
border-image.border-image-repeat.round pour la propriété border-image-repeat.space pour les propriété border-image-repeat.Remarques :
(1) Supporte la propriété résumé mais pas les propriétés détaillées.
Ne supporte pas les valeurs space et round.
pour des bordures
border-image-repeatroundspaceNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété border-image-repeat.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.Concernantborder-image-repeatIntroduction de la propriétéborder-image-repeatet plus généralement des bordures réalisées avec une image.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi : autres caractéristiques des bordures et arrière-plans.
Les propriétés relatives aux bordures et aux arrière-plans sont décrites dans la spécification Module CSS - Arrière-plans et bordures du W3C. En voici la liste :