Propriedade Box-Decoration-Break
Última atualização: 2026-09-13
box-decoration-break Propriedade Box-Decoration-Break
A propriedade box-decoration-break controla como as decorações de um elemento, como background, borda e padding, são renderizadas em um ponto de quebra, como uma quebra de linha ou de página. O valor padrão, slice, renderiza a decoração como se fosse cortada; clone renderiza uma decoração completa para cada fragmento. Ela afeta principalmente a aparência de elementos inline nas quebras de linha e na paginação de impressão.
| Categoria | |
|---|---|
| Valor Inicial | slice |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
box-decoration-break: slice | clone;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
slice | clone | Palavra-chave | Como as decorações quebram. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-decoration-break | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v16 |
| Suportado em todos os principais navegadores | |||||
Dica： Para elementos inline cujo background abrange várias linhas, box-decoration-break:clone confere a cada linha seu próprio padding e cantos arredondados completos, o que fica melhor.
❓ Perguntas Frequentes
QQual é a diferença entre slice e clone?
Aslice, o padrão, corta o elemento na quebra como uma faca: background, borda e padding continuam através da quebra sem se fechar, então os primeiros e últimos fragmentos parecem incompletos. clone renderiza cada fragmento independentemente com fundo, borda, padding e cantos arredondados completos, de modo que cada linha parece uma pequena caixa completa. Para elementos inline quebrados onde cada linha deve ter cantos arredondados completos, use clone.
QQuando eu precisaria dessa propriedade?
AO caso mais típico é um elemento inline, como span ou a, que quebra em várias linhas: para dar a cada linha seu próprio bloco de fundo, cantos arredondados e padding completos, use box-decoration-break:clone, comum em realces, estilos de etiqueta e sublinhados de link multi-linha. slice convém a efeitos nos quais a decoração deve fluir continuamente. Outro cenário é a paginação de impressão, onde você controla como as decorações quebram nas bordas da página.
QQual é o suporte dos navegadores para box-decoration-break?
AO Firefox a suporta nativamente. Chrome, Edge e Safari, os navegadores baseados em WebKit, historicamente exigem o prefixo -webkit-box-decoration-break; o Chrome suporta a forma sem prefixo desde a versão 115, enquanto o Safari depende do prefixo há muito tempo. Por segurança, escreva ambos: a versão com prefixo -webkit- primeiro e depois a declaração padrão. Os navegadores que entendem a forma prefixada a usam, e os mais novos recorrem à propriedade padrão.
QQuais estilos de decoração ela afeta?
AEla afeta decorações de caixa como background, borda, border-radius, padding e box-shadow, determinando como elas são renderizadas em uma quebra de linha ou de página. Observe que não afeta como o conteúdo inline é arranjado após a divisão, e não altera o próprio encapsulamento de texto; ela apenas controla como as decorações se comportam na quebra. Assim, você pode aplicá-la livremente sem se preocupar com o fluxo de texto subjacente.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
