CSS - box-decoration-break Property

CSSbox-decoration-breakproperty specifies how thebackground,border,border-image,box-shadow,margin,paddingandclip-pathof an element should behave when the content is broken across multiple lines or columns. It controls whether these properties should be continuous or fragmented across the line breaks.

Syntax

box-decoration-break: slice | clone | initial | inherit;

Property Values

ValueDescriptionsliceIt means that the padding, border, and background of the element will be rendered as if the content were not broken, resulting in continuous rendering across line breaks. Default ValuecloneEach box fragment is rendered individually with its defined border, padding, and margin wrapping it. The border-radius and box-shadow are applied to each fragment separately.initialIt sets the property to its default value.inheritIt inherits the property from the parent element.

Examples of CSS Box Decoration Break Property

The following examples explain thebox-decoration-breakproperty with different values.

Box Decoration Break Property with Slice Value

To let the box decoration properties be rendered continuously such that they break at the edges of the element fragment, we use theslicevalue. This is shown in the following example.

Example

Box Decoration Break Property with Clone Value

To let each individual element fragment have individual box decoration properties separately, we use theclonevalue. The value treats each element broken across multiple lines as individual element and applies the properties to each of them. This is shown in the following example.

Example

Supported Browsers

css_reference.htm