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