Proprietà CSS box-decoration-break

La proprietà CSS box-decoration-break specifica come vengono applicati background, padding, border, border-image, box-shadow, margin e clip-path di un elemento quando il box è frammentato — ovvero suddiviso su più di una riga, colonna o pagina.

Questa pagina spiega il significato di frammentazione, le differenze tra i due valori (slice e clone), quando ricorrere a questa proprietà e come utilizzarla con esempi pratici.

Cos'è un box frammentato?

Un box è frammentato quando non può essere disegnato come un unico rettangolo continuo. Il caso più comune è quello di un elemento inline come <span> il cui testo va a capo su più righe, ma la frammentazione avviene anche in corrispondenza di interruzioni di colonna (all'interno di un layout multi-colonna) e di interruzioni di pagina durante la stampa.

Per impostazione predefinita, i browser trattano l'intero elemento come un unico box e lo tagliano soltanto ai bordi delle righe. Ciò significa che le decorazioni come il bordo o il border-radius vengono disegnate una sola volta per l'intero elemento e poi ritagliate — quindi gli angoli arrotondati e il bordo destro/sinistro compaiono solo all'inizio e alla fine del contenuto, non su ogni riga. box-decoration-break consente di modificare questo comportamento.

La proprietà box-decoration-break ha due valori principali:

slice (valore predefinito) applica le decorazioni all'intero elemento come se non fosse frammentato, poi taglia il box ai bordi di ciascun frammento. Angoli, bordi e sfondi vengono "tagliati" dove il testo va a capo.
clone applica ogni decorazione a ciascun frammento in modo indipendente. I bordi circondano tutti e quattro i lati di ogni frammento, il border-radius viene ripetuto su ogni frammento e lo sfondo viene ridisegnato completamente per ciascuno.

Un modo rapido per ricordarlo: slice = un box, tagliato in pezzi; clone = ogni pezzo è un box completo a sé stante.

Quando utilizzarlo

Ricorri a box-decoration-break: clone quando vuoi che un elemento inline decorato abbia un aspetto uniforme su ogni riga — scenari comuni includono:

Testo evidenziato / "marker" in cui ogni riga a capo deve mantenere i propri angoli arrotondati e il padding.
Stili a pillola o badge applicati a link o tag inline che possono andare a capo.
Layout multi-colonna o di stampa in cui un elemento con bordo attraversa un'interruzione di colonna o di pagina e si desidera un bordo completo su ciascun frammento anziché uno aperto.

Valore iniziale	slice
Si applica a	Tutti gli elementi (e, concettualmente, a ciascun frammento del box).
Ereditato	No.
Versione	CSS3
Sintassi DOM	object.style.boxDecorationBreak = "clone";

Sintassi

Sintassi della proprietà CSS box-decoration-break

box-decoration-break: slice | clone | initial | inherit | unset;

Ecco un esempio con il valore clone, in cui le decorazioni vengono applicate a ciascun frammento come se fossero elementi individuali.

Esempio della proprietà CSS box-decoration-break con il valore clone

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #1c87c9;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
      }
      span.box {
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>Here the box-decoration-break is set to "clone".</p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Provalo tu stesso »

Risultato

I browser moderni supportano questa proprietà nativamente senza prefissi, ma il prefisso -webkit- è incluso negli esempi per compatibilità con versioni precedenti.

Vediamo ora un altro esempio in cui il valore slice viene applicato al box. In questo caso il box viene suddiviso in pezzi.

Esempio della proprietà CSS box-decoration-break con il valore slice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #ccc;
      }
      span.box {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Provalo tu stesso »

Risultato

Vediamo ora come viene applicata un'ombra al box con il valore slice.

Esempio della proprietà CSS box-decoration-break con il valore slice e ombra

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #cccccc;
        box-shadow: 5px 4px 10px #666666;
        box-decoration-break: slice;
        -webkit-box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span>Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>

Provalo tu stesso »

Risultato

Valori

Valore	Descrizione
slice	Le decorazioni del box vengono applicate all'intero elemento e vengono tagliate ai bordi dei frammenti.
clone	Le decorazioni del box vengono applicate a ciascun frammento individualmente.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.
unset	Si comporta come `inherit` se la proprietà è ereditata, altrimenti come `initial`.

Supporto dei browser e prefissi

box-decoration-break è supportata in tutti i browser moderni. Firefox supporta la proprietà senza prefisso; Chrome, Edge, Safari e altri browser WebKit/Blink hanno storicamente richiesto il prefisso -webkit-box-decoration-break, quindi è buona pratica dichiarare entrambi:

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Inserisci sempre la proprietà con prefisso prima di quella standard, in modo che la dichiarazione senza prefisso abbia la precedenza dove è supportata.

Proprietà correlate

box-shadow — aggiunge ombre che questa proprietà può clonare per ogni frammento.
border-radius — angoli arrotondati che clone ripete su ogni riga.
CSS columns — layout multi-colonna in cui avviene la frammentazione.
padding e margin — la spaziatura interessata dalla frammentazione.

Esercitazione

Pratica

Cosa fa la proprietà CSS box-decoration-break?

Definisce come il background, i bordi, l'ombra, ecc. di un elemento devono essere visualizzati in formato inline.Definisce come il font e il testo di un elemento devono essere visualizzati.Controlla come il box dell'elemento viene decorato quando si estende su più righe.Determina il colore del box dell'elemento.