CSSbox-decoration-break Property
Example
Specify the box-decoration-break property:
span.ex1 {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
span.ex2 {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
Try it Yourself »-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
span.ex2 {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
Definition and Usage
Thebox-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.
| Default value: | slice |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS3 |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| box-decoration-break | 22 -webkit- | 79 -webkit- | 32 | 7 -webkit- | 15 -webkit- |
CSS Syntax
box-decoration-break: slice|clone|initial|inherit|unset;
Property Values
| Value | Description |
|---|---|
| slice | Default. Box decorations are applied to the element as a whole and break at the edges of the element fragments |
| clone | Box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
