box-decoration-break

When the box for the element is fragmented, the box-decoration-break property designates how the background, padding, border, border-image, box-shadow, margin, and clip-path is applied.

Syntax

Example:

div.ex {
  box-decoration-break: clone;
}

Values

slice
Default value. Box decorations are applied as a whole and break at the edges of the element fragments.

clone
Box decorations are applied to each element fragment as if the fragments were individual elements. Borders will wrap all four edges of each fragment and backgrounds are redrawn in full for each fragment.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of box-decoration-break? Submit a codepen.io demo and we'll showcase it here ↴