O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

box-decoration-break

Values:

slice | clone

Initial value:

clone

Applies to:

All elements

Inherited:

No

Computed value:

Same as declared value

Description:

Defines whether the decorations—the background, padding, borders, rounded corners, border image, and box shadow—of a box that has been rendered in multiple pieces are applied to each piece separately or applied to the entire box before it is broken apart.

The most common case is an inline element that wraps across one or more line breaks. With the default behavior, slice, the pieces of the inline element are drawn as though the whole element was laid out in a single line and then sliced apart at each line break. If clone is declared, then each piece of the element is decorated as though they were separate elements sharing the same styles.

box-decoration-break also applies to block boxes that are split across columns or pages.

Examples:

span {box-decoration-break: clone;}
a {box-decoration-break: slice;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required