box-decoration-break

The box-decoration-break property lets you control how box decorations are drawn across the fragments of a "broken" element. An element can break into fragments at the end of a line, over columns, or at page breaks.

.module {
  box-decoration-break: clone;
}

The box decoration properties controlled by box-decoration-break are: background (and its sub-properties), border, border-radius, border-image, box-shadow, margin, and padding.

Values

  • slice: the initial value. Box decorations apply to the element as a whole and break at the edges of the element fragments.
  • clone: decorations apply to each fragment of the element as if the fragments were unbroken, individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment.

Usage

box-decoration-break can help maintain a consistent design among the fragments of a broken element.

In this example image, a paragraph with an orange border and a 1em top margin is broken across two columns. The top paragraph has the initial box-decoration-break value of slice. The bottom paragraph has the clone value.

In the top paragraph, the border is sliced at the column break, and the top margin applies to the first fragment only. On the bottom paragraph, the border is drawn around all four edges of both fragments of the paragraph. The margin is also applied to each fragment.

Another common case is inline text that breaks into multiple lines. Styles applied to those can look weird/bad unless you clone the styles:

Article and demo of that.

Demo

The box-decoration-break property has limited browser support. This demo works best in Firefox 37+, where box-decoration-break is fully supported.

See the Pen 1074b03653ffb32b88a6f88823c3de34 by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

At the time of this writing only Firefox fully supports box-decoration-break. Webkit browsers and Opera partially support box-decoration-break on inline elements across line breaks, but not across column or page breaks.

Chrome Safari Firefox Opera IE Android iOS
31* 7* 37 29* None 4.4* 7.1*

* partial support with -webkit prefix.

Comments

  1. User Avatar
    Andy
    Permalink to comment#

    This old dog just learned a new CSS trick. Woof (translates to “thanks—cool article” in dog”).

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag