CSS box-decoration-break Property

Specify the box decoration break property:

span.ex1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}

span.ex2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}

Try it Yourself »


Definition and Usage

The box-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.

Default value: slice
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.boxDecorationBreak=”clone” Try it
CSS Syntax
box-decoration-break: slice|clone|initial|inherit|unset;
Property Values
Value Description
slice Default. Box decorations are applied to the element as a whole and break at the edges of the element fragments
clone Box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit