Propiedad CSS box-decoration-break

La propiedad CSS box-decoration-break especifica cómo se aplican el fondo, el padding, el borde, border-image, box-shadow, el margin y clip-path de un elemento cuando la caja está fragmentada — es decir, dividida en más de una línea, columna o página.

Esta página explica qué significa la fragmentación, cómo difieren los dos valores (slice y clone), cuándo usar esta propiedad y cómo utilizarla con ejemplos prácticos.

¿Qué es una caja fragmentada?

Una caja está fragmentada cuando no puede dibujarse como un rectángulo continuo. El caso más común es un elemento en línea como <span> cuyo texto se divide en varias líneas, pero la fragmentación también ocurre en los saltos de columna (dentro de un diseño multicolumna) y en los saltos de página al imprimir.

Por defecto, los navegadores tratan todo el elemento como una sola caja y solo la recortan en los bordes de línea. Esto significa que las decoraciones como el borde o el border-radius se dibujan una vez para todo el elemento y luego se cortan — por lo que las esquinas redondeadas y el borde derecho/izquierdo solo aparecen al inicio y al final del elemento, no en cada línea. box-decoration-break permite cambiar ese comportamiento.

La propiedad box-decoration-break tiene dos valores principales:

slice (el valor por defecto) aplica las decoraciones a todo el elemento como si no estuviera fragmentado, y luego recorta la caja en los bordes de cada fragmento. Las esquinas, los bordes y los fondos se "cortan" donde se produce el salto de línea.
clone aplica cada decoración a cada fragmento de forma independiente. Los bordes rodean los cuatro lados de cada fragmento, el border-radius se repite en cada uno, y el fondo se redibuja completamente en cada fragmento.

Una forma rápida de recordarlo: slice = una caja cortada en piezas; clone = cada pieza es su propia caja completa.

Cuándo usarlo

Usa box-decoration-break: clone cuando quieras que un elemento en línea decorado tenga un aspecto consistente en cada línea. Los escenarios más comunes incluyen:

Texto resaltado / "marcador" donde cada línea envuelta debe conservar sus esquinas redondeadas y su padding.
Estilos de pastilla o insignia aplicados a enlaces en línea o etiquetas que pueden romperse.
Diseños multicolumna o impresos donde un elemento con borde cruza un salto de columna o de página y se desea un borde completo en cada fragmento en lugar de uno abierto.

Valor inicial	slice
Se aplica a	Todos los elementos (y, conceptualmente, a cada fragmento de caja).
Heredado	No.
Versión	CSS3
Sintaxis DOM	object.style.boxDecorationBreak = "clone";

Sintaxis

Sintaxis de la propiedad CSS box-decoration-break

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

A continuación se muestra un ejemplo con el valor clone, donde las decoraciones se aplican a cada fragmento como si fueran elementos individuales.

Ejemplo de la propiedad CSS box-decoration-break con el 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>

Pruébalo tú mismo »

Resultado

Los navegadores modernos admiten esta propiedad de forma nativa sin prefijos, pero el prefijo -webkit- se incluye en los ejemplos por compatibilidad con versiones anteriores.

Veamos otro ejemplo donde se aplica el valor slice a la caja. Aquí la caja se recorta en piezas.

Ejemplo de la propiedad CSS box-decoration-break con el 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>

Pruébalo tú mismo »

Resultado

Ahora veamos cómo se aplica una sombra de caja a la caja recortada.

Ejemplo de la propiedad CSS box-decoration-break con el valor slice y 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>

Pruébalo tú mismo »

Resultado

Valores

Valor	Descripción
slice	Las decoraciones de la caja se aplican a todo el elemento y se cortan en los bordes de los fragmentos.
clone	Las decoraciones de la caja se aplican a cada fragmento de forma individual.
initial	Establece la propiedad a su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.
unset	Actúa como `inherit` si la propiedad es heredada, de lo contrario como `initial`.

Compatibilidad con navegadores y prefijos

box-decoration-break es compatible con todos los navegadores modernos. Firefox admite la propiedad sin prefijo; Chrome, Edge, Safari y otros navegadores WebKit/Blink históricamente requerían el prefijo -webkit-box-decoration-break, por lo que es una buena práctica declarar ambos:

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

Coloca siempre la propiedad con prefijo antes que la estándar, para que la declaración sin prefijo tenga prioridad donde es compatible.

Propiedades relacionadas

box-shadow — agrega sombras que esta propiedad puede clonar por fragmento.
border-radius — esquinas redondeadas que clone repite en cada línea.
CSS columns — diseños multicolumna donde se produce la fragmentación.
padding y margin — el espaciado afectado por la fragmentación.

Práctica

¿Qué hace la propiedad CSS box-decoration-break?

Define cómo se deben mostrar el fondo, los bordes, la sombra, etc., de un elemento en formato en línea.Define cómo se deben mostrar la fuente y el texto de un elemento.Controla cómo se decora la caja del elemento cuando abarca múltiples líneas.Determina el color de la caja del elemento.