📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣
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.
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.
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
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:
box-decoration-break property has limited browser support. This demo works best in Firefox 37+, where
box-decoration-break is fully supported.
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.
* partial support with