This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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

See also

Related articles

CSS Layout

External resources