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


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment