CSS box-decoration-break Property

CSS box-decoration-break property specifies how the fragments of an element should be rendered. The fragmentation occurs when an inline element(<span>, <a>, <textarea>, etc.) broken into multiple lines, or an element broken into multiple columns, or a page breaks when printed.

The box-decoration-break property affects only background, border, border-image, box-shadow, clip-path, margin, and padding properties.

The box-decoration-break property basically allows us to control whether a fragment of an element should be treated as a part of its parent box or as an individual box. Refer to the example below:


  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

CSS Syntax

The box-decoration-break property has the below syntax:

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

Property Values

The box-decoration-break property accepts the following values:

sliceThis is the default value. It specifies that each fragment should be treated as a part of the parent box.
cloneSpecifies that each fragment should be treated as an individual box.
initialSets the box-decoration-break property to its default value(slice).
inheritInherits the box-decoration-break property from the parent element.

General Info

Default Valueslice
JavaScript Usageelement.style.box-decoration-break = “clone”;