Proprietà CSS border-image

La proprietà shorthand border-image consente di usare un'immagine — o un gradiente CSS — come bordo di un elemento, al posto di una semplice linea solida. È una delle proprietà CSS3.

Questa pagina spiega come funziona la proprietà (il modello a nove sezioni su cui si basa), la sintassi della shorthand, diversi esempi eseguibili e quando ha senso usare border-image.

Come funziona border-image: il modello a nove sezioni

Il meccanismo che rende possibile border-image è il nine-slicing (suddivisione in nove parti). Il browser prende l'immagine sorgente e la taglia con quattro linee — due orizzontali, due verticali — in nove regioni:

4 angoli vengono posizionati nei quattro angoli dell'elemento e non vengono mai allungati né ripetuti.
4 bordi (superiore, destro, inferiore, sinistro) riempiono lo spazio tra gli angoli. Vengono allungati, ripetuti, arrotondati o spaziati in base a border-image-repeat.
1 parte centrale viene scartata per impostazione predefinita, quindi il background dell'elemento risulta visibile. Aggiungere la parola chiave fill a border-image-slice per mantenerla.

La posizione di quelle linee di suddivisione è controllata da border-image-slice. Questo modello fa sì che una piccola immagine di una cornice decorativa possa avvolgere un box di qualsiasi dimensione senza distorcere gli angoli.

Importante: border-image viene disegnato solo se l'elemento ha effettivamente un bordo. È necessario impostare un border-style (o la shorthand border) diverso da none — ad esempio border: 10px solid transparent; — altrimenti non appare nulla.

La shorthand e le sue sotto-proprietà

Questa shorthand combina diverse proprietà border-image individuali. I valori omessi assumono i loro valori iniziali. Consulta le note per ogni sotto-proprietà qui di seguito:

border-image-source - Se il valore è "none", o se l'immagine non può essere visualizzata, verranno usati gli stili del bordo.
border-image-slice - La parte centrale dell'immagine è trattata come completamente trasparente, a meno che non sia impostato il valore "fill".
border-image-width - Se il valore di questa proprietà è maggiore del border-width dell'elemento, l'immagine del bordo si estenderà oltre il margine di padding (e/o content). È importante sapere anche che questa proprietà può essere specificata con uno, due, tre o quattro valori.
border-image-outset - Può essere specificata anch'essa con uno, due, tre o quattro valori.
border-image-repeat - Può essere specificata con due valori. Se il secondo valore viene omesso, si assume uguale al primo. Quando si imposta un solo valore, esso si applica allo stesso modo a tutti e quattro i lati; se si impostano due valori, il primo si applica in alto e in basso, il secondo a sinistra e a destra.

Proprietà	Valore
Valore iniziale	none 100% 1 0 stretch
Si applica a	Tutti gli elementi, eccetto gli elementi interni della tabella quando border-collapse è "collapse". Si applica anche a ::first-letter.
Ereditato	No
Animabile	No
Versione	CSS3
Sintassi DOM	object.style.borderImage = "url(border.png) 30 round"

Sintassi

Sintassi della proprietà CSS border-image

border-image: source slice width outset repeat | initial | inherit;

Esempio della proprietà border-image:

Esempio della proprietà CSS border-image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">border-image: 10% 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 con valori multipli:

Esempio della proprietà CSS border-image con valori diversi

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</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 »

Usare un gradiente CSS come bordo

border-image-source accetta anche un gradiente oltre a un URL, così è possibile creare un bordo colorato senza alcun file immagine. Il gradiente viene trattato esattamente come un'immagine e suddiviso allo stesso modo.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Il valore 1 dopo il gradiente è il valore di border-image-slice. Poiché un gradiente non ha bordi reali da proteggere, suddividerlo a 1 mappa semplicemente i quattro lati e gli angoli sul bordo senza distorsioni.

Quando usare border-image

Ricorrere a border-image quando un singolo colore solido non è sufficiente:

Cornici decorative o a tema — bordi ornamentali, disegnati a mano o effetto carta strappata, impossibili da ottenere con border-style.
Bordi con gradiente — vedi l'esempio sopra; molto più semplice che simularlo con un elemento wrapper e background-clip.
Pattern ripetuti — una piccola tessera che avvolge box di qualsiasi dimensione grazie al modello a nove sezioni.

Per angoli arrotondati normali usa border-radius; per una normale linea colorata usa la shorthand standard border — sono più leggeri e animabili, mentre border-image non lo è.

Valori

Valore	Descrizione	Prova
border-image-source	Specifica l'immagine sorgente usata per creare l'immagine del bordo. Può essere un URL, un URI dati, un gradiente CSS o un SVG inline.
border-image-slice	Specifica come suddividere l'immagine indicata da border-image-source. L'immagine viene sempre divisa in nove sezioni: quattro angoli, quattro lati e la parte centrale.	Prova »
border-image-width	Specifica la larghezza dell'immagine del bordo.
border-image-repeat	Specifica se l'immagine del bordo viene ripetuta, arrotondata o allungata.	Prova »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dal suo elemento padre.

Supporto dei browser

border-image è supportato da tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Poiché ricade in modo elegante sullo stile definito da border-style/border-color, può essere applicato sopra un bordo normale come miglioramento progressivo: i browser meno recenti o non supportati mostrano il bordo semplice, quelli più nuovi mostrano l'immagine.

Esercizi pratici

Pratica

Cosa è vero riguardo alla proprietà CSS border-image secondo il contenuto all'URL specificato?

La proprietà CSS border-image è una proprietà shorthand per impostare le singole proprietà dell'immagine del bordo, ovvero border-image-source, border-image-slice, border-image-width, border-image-outset e border-image-repeat in una singola dichiarazione.La proprietà border-image non consente agli sviluppatori di specificare un'immagine da usare come bordo attorno a un elemento.La proprietà border-image può essere usata con tutti gli elementi HTML.La proprietà CSS border-image non può essere animata e non si applica agli elementi della tabella quando border-collapse è impostato su collapse.La proprietà CSS border-image richiede un solo valore per funzionare.