CSS box-decoration-break Property

CSS box-decoration-break Property

This property allows you to control the box decorations and how they are drawn across the fragments of a broken element. In other words it specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the element is broken.

Syntax -

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

 

Now we will see their values with there descriptions -

Value	Description
slice	Decorations are applied to the element completely, and it breaks at the edges, and this is the default value of this property.
clone	It treats every fragment as individual elements, and decorations are applied to every fragment of the element.
Value	Description
slice	Decorations are applied to the element completely, and it breaks at the edges, and this is the default value of this property.
clone	It treats every fragment as individual elements, and decorations are applied to every fragment of the element.

 

Now we will see Example -

Example -

Output -