CSS box-decoration-break Property

Example

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;
}

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.
Version:	CSS3

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
box-decoration-break	22.0 -webkit-	79.0	32.0	6.1 -webkit-	11.5 -webkit-

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.
inherit	Inherits this property from its parent element.