What is the box-decoration-break property in CSS?

The box-decoration-break property in CSSCascading Style Sheets is used to set how a box should look after a paragraph is fragmented. It is used to set different properties for different fragments. It is used to set or define the element’s background, padding, margin, border, box-shadow, etc.

Syntax

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

Property values

• slice: This is the default value. As a whole, it breaks the edges of the fragment elements.

• clone: This is used to define the properties of each fragment independently. Backgrounds for each fragment are redrawn.

• initial: This is used to set the value to its default value.

• inherit: This is used to inherit property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the box-decoration-break property.

Explanation

In this example, we set the properties of the box, i.e., how each box should look like. We maintained the theme, style, and color of each box so that they are identical. However, we could also change the theme, style, and color of each box separately.