CSS box-decoration-break Property
Example
Specify the box-decoration-break property:
span.ex1 {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break:
clone;
}
span.ex2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break:
slice;
}
Try it Yourself »
Definition and Usage
The box-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 about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxDecorationBreak="clone" Try it |
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.0 -webkit- | Not supported | 32.0 | 6.1 -webkit- | 11.5 -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 about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
