CSS box-decoration-break attribute

Definition and usage

The box-decoration-break property specifies how the element's background, padding, border, border-image, box-shadow, margin, and clip-path are applied when the element's box is segmented.

Example

Define 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

CSS syntax

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

Attribute value

Value Description
slice Default. Box decoration is applied to the element as a whole and breaks at the edges of the element segments.
clone

Box decoration is applied to each segment of the element, as if each segment were a single element.

The four edges of each segment of the element's border wrap the element, and the background of each segment is redrawn completely.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: slice
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3

Browser support

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

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

Chrome IE / Edge Firefox Safari Opera
22.0 -webkit- 79.0 32.0 6.1 -webkit- 11.5 -webkit-