Proprietà CSS border-image-width

La proprietà CSS border-image-width definisce la larghezza dell'immagine del bordo di un elemento — ovvero quanto spesso viene disegnato il bordo basato su un'immagine attorno al box. È una delle proprietà CSS3.

Quando utilizzarla

border-image-width è necessaria solo quando un elemento ha già un'immagine del bordo impostata con border-image-source (e di solito con border-image-slice). Da sola non produce alcun effetto.

Un aspetto importante da tenere presente: border-image-width non è uguale alla normale border-width. La semplice border-width riserva spazio nel box model e influisce sul layout, mentre border-image-width controlla solo quanto è larga l'immagine disegnata nell'area del bordo. Se si imposta un'immagine più larga del bordo effettivo, essa può traboccare verso l'interno sopra il padding/contenuto dell'elemento senza spostare gli altri elementi. Per questo motivo la maggior parte degli esempi imposta prima un border trasparente e poi definisce la dimensione dell'immagine con border-image-width.

Tipi di valore accettati

La larghezza di ciascun lato può essere espressa in diversi modi:

<length> — una dimensione fissa, ad esempio 20px.
<number> — un moltiplicatore della corrispondente border-width. border-image-width: 2 significa "il doppio della larghezza del bordo". Questo è il tipo usato dal valore iniziale 1.
<percentage> — relativa alla dimensione dell'area dell'immagine del bordo (le percentuali orizzontali usano la sua larghezza, quelle verticali la sua altezza).
auto — usa la larghezza/altezza intrinseca del corrispondente border-image-slice, oppure la border-width corrispondente se non esiste una dimensione intrinseca.

Quanti valori utilizzare

border-image-width accetta da uno a quattro valori, seguendo la stenografia CSS standard in senso orario:

Un valore — si applica a tutti e quattro i lati.
Due valori — il primo è in alto/basso, il secondo è a sinistra/destra.
Tre valori — il primo è in alto, il secondo è a sinistra/destra, il terzo è in basso.
Quattro valori — in alto, a destra, in basso, a sinistra (in senso orario dall'alto).

Quando un valore viene omesso, rispecchia il lato opposto: un quarto valore omesso copia il secondo (sinistra = destra), un terzo valore omesso copia il primo (basso = alto), e un secondo valore omesso copia il primo (quindi un solo valore si applica a tutto).

Valore iniziale	1
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.borderImageWidth = "20px";

Sintassi

Sintassi della proprietà CSS border-image-width

border-image-width: number | % | auto | initial | inherit;

Esempio della proprietà border-image-width:

Esempio della proprietà CSS border-image-width con valore px

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Ecco un altro esempio in cui puoi vedere cosa cambia utilizzando uno, due, tre o quattro valori.

Esempio della proprietà border-image-width con valori diversi:

Esempio della proprietà CSS border-image-width con due, tre e quattro valori

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 40px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px;
      }
      .border4 {
        border: 10px solid transparent;
        padding: 55px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px 55px;
      }
    </style>
  </head>
  <body>
    <h1>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Provalo tu stesso »

Nell'esempio precedente, .border1 utilizza un solo valore per tutti i lati, mentre .border4 assegna a ciascun lato una larghezza diversa — si può notare come i lati più spessi disegnino l'immagine più verso l'interno.

Proprietà correlate

border-image-source — imposta quale immagine viene utilizzata per il bordo.
border-image-slice — suddivide l'immagine sorgente nelle nove regioni che formano il bordo.
border-image-outset — spinge l'immagine del bordo oltre il box del bordo.
border-width — la larghezza del bordo normale che border-image-width moltiplica quando viene usato un <number>.

Valori

Valore	Descrizione	Provalo
length	Un'unità di lunghezza (px) che definisce la dimensione della border-width.	Provalo »
number	La larghezza del bordo è definita come multiplo della corrispondente border-width. Non deve essere negativo e il valore predefinito è 1.	Provalo »
percentage	Viene calcolata in relazione alla larghezza dell'area dell'immagine del bordo per gli offset orizzontali e all'altezza dell'area dell'immagine del bordo per gli offset verticali.	Provalo »
auto	La larghezza del bordo viene impostata uguale alla larghezza o all'altezza intrinseca del corrispondente border-image-slice.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dal suo elemento padre.

Esercitati

Pratica

Cosa fa la proprietà 'border-image-width' in CSS?

Imposta la proprietà width del bordo di un'immagine.Permette di definire l'immagine che verrà utilizzata come bordo.Permette di ingrandire o ridurre l'area del border-image e dispone di quattro valori: top, right, bottom e left.Imposta l'immagine di sfondo del bordo.Permette di stilizzare i bordi con le immagini.