Propriedade CSS box-decoration-break

A propriedade CSS box-decoration-break especifica como o background, o padding, a border, o border-image, o box-shadow, a margin e o clip-path de um elemento são aplicados quando a caixa é fragmentada — ou seja, dividida em mais de uma linha, coluna ou página.

Esta página explica o que significa fragmentação, como os dois valores (slice e clone) diferem entre si, quando usar essa propriedade e como utilizá-la com exemplos práticos.

O que é uma caixa fragmentada?

Uma caixa é fragmentada quando não pode ser desenhada como um único retângulo contínuo. O caso mais comum é um elemento inline como um <span> cujo texto quebra em várias linhas, mas a fragmentação também ocorre em quebras de coluna (dentro de um layout multi-coluna) e em quebras de página ao imprimir.

Por padrão, os navegadores tratam o elemento inteiro como uma única caixa e apenas a recortam nas bordas das linhas. Isso significa que decorações como a borda ou o border-radius são desenhadas uma vez para o elemento inteiro e depois cortadas — portanto, os cantos arredondados e a borda esquerda/direita só aparecem no início e no fim do trecho, não em cada linha. box-decoration-break permite alterar esse comportamento.

A propriedade box-decoration-break possui dois valores principais:

slice (o padrão) aplica as decorações ao elemento inteiro como se ele não fosse fragmentado e, em seguida, recorta a caixa nas bordas de cada fragmento. Cantos, bordas e backgrounds são "cortados" onde a linha quebra.
clone aplica cada decoração a cada fragmento de forma independente. As bordas envolvem todos os quatro lados de cada fragmento, o border-radius é repetido em cada fragmento e o background é completamente redesenhado para cada um.

Uma forma rápida de lembrar: slice = uma caixa cortada em pedaços; clone = cada pedaço é sua própria caixa completa.

Quando usar

Use box-decoration-break: clone quando quiser que um elemento inline decorado tenha aparência consistente em cada linha — cenários comuns incluem:

Texto destacado / "marcador" onde cada linha quebrada deve manter seus cantos arredondados e padding.
Estilos de pílula ou badge aplicados a links ou tags inline que podem quebrar.
Layouts multi-coluna ou impressos onde um elemento com borda cruza uma quebra de coluna ou página e você deseja uma borda completa em cada fragmento em vez de uma borda aberta.

Valor Inicial	slice
Aplica-se a	Todos os elementos (e, conceitualmente, a cada fragmento de caixa).
Herdado	Não.
Versão	CSS3
Sintaxe DOM	object.style.boxDecorationBreak = "clone";

Sintaxe

Sintaxe da Propriedade CSS box-decoration-break

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

Aqui está um exemplo com o valor clone, onde as decorações se aplicam a cada fragmento como se os fragmentos fossem elementos individuais.

Exemplo da Propriedade CSS box-decoration-break com o valor 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>

Experimente Você Mesmo »

Resultado

Os navegadores modernos suportam essa propriedade nativamente sem prefixos, mas o prefixo -webkit- está incluído nos exemplos para compatibilidade com versões antigas.

Vejamos outro exemplo onde o valor slice é aplicado à caixa. Aqui a caixa é fatiada em pedaços.

Exemplo da Propriedade CSS box-decoration-break com o valor 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>

Experimente Você Mesmo »

Resultado

Agora vejamos como uma sombra de caixa é aplicada à caixa fatiada.

Exemplo da Propriedade CSS box-decoration-break com o valor slice e sombra

<!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>

Experimente Você Mesmo »

Resultado

Valores

Valor	Descrição
slice	As decorações da caixa são aplicadas ao elemento inteiro e cortadas nas bordas dos fragmentos.
clone	As decorações da caixa são aplicadas a cada fragmento individualmente.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.
unset	Age como `inherit` se a propriedade é herdada, caso contrário age como `initial`.

Suporte de navegadores e prefixos

box-decoration-break é suportada em todos os navegadores modernos. O Firefox suporta a propriedade sem prefixo; Chrome, Edge, Safari e outros navegadores WebKit/Blink historicamente exigiam o prefixo -webkit-box-decoration-break, por isso é uma boa prática declarar ambos:

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

Sempre coloque a propriedade com prefixo antes da padrão para que a declaração sem prefixo tenha precedência onde for suportada.

Propriedades relacionadas

box-shadow — adiciona sombras que esta propriedade pode clonar por fragmento.
border-radius — cantos arredondados que clone repete em cada linha.
CSS columns — layouts multi-coluna onde ocorre a fragmentação.
padding e margin — o espaçamento afetado pela fragmentação.

Prática

O que a propriedade CSS box-decoration-break faz?

Define como o background, as bordas, a sombra, etc. de um elemento devem ser exibidos em formato inline.Define como a fonte e o texto de um elemento devem ser exibidos.Controla como a caixa do elemento é decorada quando ela abrange múltiplas linhas.Determina a cor da caixa do elemento.