box-decoration-break

Summary

Breaks a box into fragments creating new borders, padding and repeating backgrounds or lets it stay as a continuous box on a page break, column break, or, for inline elements, at a line break.

Overview table

Initial value: slice
Applies to: All elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No

CSS Object Model Property
:

Syntax

box-decoration-break: clone
box-decoration-break: slice

Values

clone: Each box fragment is independently wrapped with the border and padding. The border-radius and border-image and box-shadow, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element. A no-repeat background image will thus be rendered once in each fragment of the element.
slice: No border and no padding are inserted at a break. No box-shadow is drawn at a broken edge; border-radius does not apply to its corners; and the border-image is rendered for the whole box as if it were unbroken. The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward. Backgrounds are drawn as if, after the element has been laid out (including any justification, reordering, page breaks, etc.), all the element’s box fragments were taken and put one after the other in visual order. The background is applied to the bounding box of this composite box and then the fragments are put back, with each with its share of the background.

Examples

This is an example of CSS how you can use box-decoration-break for a given element .clone which is part of the element element with column breaks.

/**
 * box-decoration-break
 *
 * Please be aware that this demo uses prefix-free.js to
 * remove the hassle of adding vendor prefixes.
 * This is currently not working in any browser.
 */
.clone {
    /* Set some values to be cloned */
    background: #eee;
    border: 1px solid #aaa;
    padding: 5px;

    /* Clone the box */
    box-decoration-break: clone;
}

/* Creating a bunch of columns */
.box {
    column-count: 4;
    column-gap: 1em;
}

View live example

Usage

 This property comes in handy if you want to indicate how a box splits when, for example a user prints a page.

When using CSS columns, grids or regions it is useful to decide how a box looks when it breaks.

Notes

In Firefox there is -moz-background-inline-policy which enables you to treat background images how you want to. This is only a partial implementation of box-decoration-break.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: Candidate Recommendation