CSS box-decoration-break Property

❮ Previous Complete CSS Reference Next ❯

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

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

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

❮ Previous Complete CSS Reference Next ❯