Sintassi

Significato dei valori principali:

• url(image): l'URL dell'immagine da utilizzare come bordo.

• slice: definisce come l'immagine sarà divisa per formare il bordo (in percentuale o pixel).

• width: definisce lo spessore del bordo (in pixel o in altre unità di misura).

• outset: definisce l'offset del bordo (come si estende fuori dal contenitore).

• repeat: specifica come ripetere l'immagine (valori: repeat, space, round, no-repeat).

  I valori repeat, space, round e no-repeat nella proprietà border-image-repeat definiscono come l'immagine viene ripetuta lungo i bordi (superiore, inferiore, sinistro, destro) dell'elemento HTML. Vediamoli nel dettaglio:

  • repeat: l'immagine viene ripetuta quante volte necessario per coprire il bordo.
    Esempio visivo: ||||||||| (può essere tagliata se non entra perfettamente).

  • space: l’immagine viene ripetuta senza essere tagliata, con spazi uniformi tra le ripetizioni.
    Esempio visivo: | | | | (può lasciare spazio alle estremità).

  • round: l’immagine viene ripetuta e ridimensionata leggermente per adattarsi perfettamente al bordo.
    Esempio visivo: | | | | | (senza tagli né spazi vuoti).

  • no-repeat: l’immagine non viene ripetuta, viene usata solo una volta su ogni lato.
    Esempio visivo: | (una sola immagine e basta).

Tabella Riassuntiva - border-image-repeat

Esempio proprietà: border-image

Codice Esempio: border-image

CODE: CSS

1. .border-image-example {

2.   width: 300px;

3.   height: 200px;

4.   border: 20px solid transparent; /* La larghezza del bordo deve essere impostata */

5.   border-image: url('https://www.example.com/border-image.png') 30 round; /* Utilizzo dell'immagine come bordo */

6.   padding: 20px;

7.   background-color: #ff6347;

8.   color: white;

9.   font-size: 22px;

10.   text-align: center;

11.   border-radius: 10px;

12. }

Contenuto Esempio: border-image

Esempio di utilizzo di border-image

In questo esempio, la proprietà border-image viene utilizzata per applicare un'immagine come bordo di un elemento:

Elemento con bordo immagine

CSS e HTML per l'elemento con bordo immagine:

  
  <style>
    .border-image-example {
      width: 300px;
      height: 200px;
      border: 20px solid transparent; /* serve per attivare l'area del bordo */
      border-image: url('https://www.example.com/border-image.png') 31 round;
	  /* ---------------------------------------------------------------------
	     31 indica quanto “tagliare” l'immagine per il bordo, 
             round fa sì che l'immagine si ripeta arrotondando per adattarsi
	  ---------------------------------------------------------------------- */
      padding: 20px;
      background-color: #ffc847;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  
  <div class="border-image-example">
    Elemento con bordo immagine
  </div>
  

---

Immagine usata per il bordo

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser