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:
Example:
.span1{ box-decoration-break: slice; -webkit-box-decoration-break: slice; } .span2{ 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:
slice | This is the default value. It specifies that each fragment should be treated as a part of the parent box. |
clone | Specifies that each fragment should be treated as an individual box. |
initial | Sets the box-decoration-break property to its default value(slice). |
inherit | Inherits the box-decoration-break property from the parent element. |
General Info
Default Value | slice |
Inherited | No |
JavaScript Usage | element.style.box-decoration-break = “clone”; |