Proprietà CSS border-image-repeat

La proprietà CSS border-image-repeat controlla come le sezioni laterali di un border-image vengono ridimensionate per riempire i bordi di un elemento. Determina se quelle sezioni vengono allungate, ripetute (come tessere), arrotondate in modo che un numero intero di tessere si adatti esattamente, oppure distanziate con spazi vuoti. È una delle proprietà CSS3.

Quando si fornisce un'immagine del bordo, la proprietà border-image-slice la divide in nove regioni: quattro angoli, quattro bordi laterali e un centro. Gli angoli vengono sempre posizionati una volta in ciascun angolo — ma le quattro sezioni laterali di solito devono coprire una distanza che non è un multiplo esatto della dimensione della sezione. border-image-repeat è ciò che indica al browser come gestire questa discrepanza.

La proprietà può essere definita utilizzando uno o due valori. Se viene specificato un solo valore, applica lo stesso comportamento su tutti e quattro i lati. Se vengono specificati due valori, il primo si applica in alto e in basso, il secondo a sinistra e a destra.

Valore iniziale	stretch
Si applica a	Tutti gli elementi, eccetto gli elementi interni di una tabella quando border-collapse è "collapse". Si applica anche a ::first-letter.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.borderImageRepeat = "round";

Sintassi

Sintassi della proprietà CSS border-image-repeat

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Esempio della proprietà border-image-repeat:

Esempio della proprietà CSS border-image-repeat con il valore round

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà border-image-repeat con i valori "round" e "repeat":

Esempio della proprietà CSS border-image-repeat con i valori round e repeat

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: repeat;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà border-image-repeat con i valori "space" e "stretch":

Esempio della proprietà CSS border-image-repeat con i valori space e stretch

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Provalo tu stesso »

Comportamento di ciascun valore

Le quattro parole chiave differiscono soltanto nel modo in cui gestiscono il fatto che una sezione laterale raramente si affianca uniformemente nel lato che deve riempire:

stretch (il valore predefinito) prende una singola sezione laterale e la ridimensiona per coprire l'intero lato. Non c'è affiancamento, quindi un motivo con elementi distinti (punti, forme, testo) viene distorto, ma un gradiente uniforme o una texture solida rimane invariata.
repeat affianca la sezione laterale alla sua dimensione naturale e ritaglia semplicemente ciò che non si adatta. Le tessere mantengono le loro proporzioni, ma si potrebbe vedere una tessera parziale ritagliata ad ogni angolo — e il motivo di solito non è centrato.
round affianca anch'esso, ma prima ridimensiona leggermente la sezione in modo che un numero intero di tessere si adatti esattamente tra gli angoli. Si usa quando si vuole una ripetizione pulita e simmetrica senza tessere ritagliate, e una piccola distorsione è accettabile.
space affianca alla dimensione naturale come repeat, ma invece di ritagliare elimina la tessera parziale rimanente e distribuisce lo spazio liberato come spazi uguali tra le tessere intere. (space ha il supporto browser meno ampio tra i quattro.)

Una regola pratica: scegliere stretch per gradienti e texture continue, round per motivi decorativi in cui la simmetria è importante, e repeat o space quando si vuole che il motivo resti esattamente alla sua dimensione originale.

Nota: border-image-repeat non ha effetto da solo — l'elemento deve avere già un border-image-source impostato e una larghezza del bordo diversa da zero. Viene scritto più spesso come parte della proprietà abbreviata border-image piuttosto che autonomamente.

Valori

Valore	Descrizione	Provalo
stretch	Ogni spazio tra i bordi verrà riempito con immagini allungate. Questo è il valore predefinito.	Provalo »
repeat	Ogni spazio tra i bordi verrà riempito con immagini ripetute. Per ottenere un adattamento corretto, le ripetizioni possono essere ritagliate.	Provalo »
round	Ogni spazio tra i bordi verrà riempito con immagini ripetute. Per ottenere un adattamento corretto, le ripetizioni possono essere allungate.	Provalo »
space	Ogni spazio tra i bordi verrà riempito con immagini ripetute. Per ottenere un adattamento corretto, lo spazio extra verrà distribuito tra le ripetizioni.
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento padre.

Esercizio

Pratica

Quali valori possono essere usati con la proprietà CSS border-image-repeat?

Proprietà correlate

Le altre proprietà estese border-image-* funzionano insieme a border-image-repeat:

border-image — la proprietà abbreviata che le imposta tutte contemporaneamente.
border-image-source — l'immagine da utilizzare.
border-image-slice — come la sorgente viene divisa in nove regioni.
border-image-width — la larghezza dell'area dell'immagine del bordo.
border-image-outset — quanto l'immagine si estende oltre il box del bordo.