The box-decoration-break property in CSS3 specifies the ways in which we can draw box decorations (background, padding, border, margin, clip, border-image, box-shadow) across the fragments of a broken element.It actually helps to maintain a constant design among the fragments of a broken element.

Syntax:

selector { 

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

}

Values:

  • clone; Each box fragment is rendered independently with specified paddings, border sand margins wrapping each fragment.The border-image, box-shadow and border-radius are applied to each fragment independently.
  • slice; The element is rendered like its box was not fragmented then the rendering for this conjectured box is sliced into pieces for each line/page/column.
  • initial, inherit

Example

The box-decoration-break example with clone value:

 

›› go to examples ››