CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-image-repeat

La proprietà CSS border-image-repeat controlla la ripetizione dell'immagine del bordo

La proprietà border-image-repeat permette di specificare come l'immagine del bordo deve essere ripetuta lungo i bordi dell'elemento. Puoi scegliere tra diversi comportamenti di ripetizione, come ripetere l'immagine, ridimensionarla per adattarla al bordo, o non ripeterla affatto.

Sintassi

border-image-repeat: repeat | round | space | no-repeat;

Significato dei valori principali:

  • repeat: l'immagine del bordo viene ripetuta lungo i bordi dell'elemento, coprendo completamente l'area del bordo.

  • round: l'immagine del bordo viene ripetuta e ridimensionata per coprire uniformemente l'intero bordo, senza lasciare spazi vuoti.

  • space: l'immagine viene ripetuta lungo il bordo, ma con spazi uguali tra le ripetizioni.

  • no-repeat: l'immagine viene applicata una sola volta, senza ripetersi lungo il bordo.


Esempio proprietà: border-image-repeat


Codice Esempio: border-image-repeat

CODE: CSSpreleva codice
  1. .border-image-repeat-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.   border-image-repeat: space; /* L'immagine del bordo viene ripetuta con spazi tra le ripetizioni */
  7.   padding: 20px;
  8.   background-color: #ff6347;
  9.   color: white;
  10.   font-size: 22px;
  11.   text-align: center;
  12.   border-radius: 10px;
  13. }

Contenuto Esempio: border-image-repeat

Esempio di utilizzo di border-image-repeat

In questo esempio, la proprietà border-image-repeat viene utilizzata per definire come l'immagine del bordo debba ripetersi lungo i bordi di un elemento. Il valore space fa sì che l'immagine venga ripetuta con spazi tra una ripetizione e l'altra.


Elemento con bordo immagine ripetuto

CSS e HTML per l'elemento con bordo immagine ripetuto:

  
  <style>
    .border-image-repeat-example {
      width: 300px;
      height: 200px;
      border: 20px solid transparent;
      border-image-source: url('https://www.example.com/border-image.png');
      border-image-slice: 31;
      border-image-repeat: space; /* Ripetizione con spazi */
      padding: 20px;
      background-color: #ffc847;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  
  <div class="border-image-repeat-example">
    Elemento con bordo immagine ripetuto
  </div>
  

Immagine usata per il bordo

Prova questo esempio

DEMO
PayPal DONATE

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies