New Horizons Get Schooled Blog

Control broken fragments with box-decoration-break (CSS)

Control broken fragments with box-decoration-break (CSS)First introduced in CSS3, the box-decoration-break property is part of the organic development of visual coding. Before CSS3, there were no simple solutions to fragmented lines of text in a box. What you saw was what you got. Fortunately, the box-decoration-break property allows developers to control where the borders of a box decoration divide the fragments of a broken element. This can apply to end-of-line text, where columns divide and page breaks.

Add a box-decoration-break by creating a new class such as .break  {   box-decoration-break: clone; } and assigning the class to the appropriate element in the CSS. The value of the box-decoration-break can be either “slice” or “clone.” Slice will apply to the element as a whole and display breaks at the edges of each fragment. Clone applies decorations to each fragment as an individual element.

Posted on 9/28/18 8:51 AM by Get Schooled in CSS

Get Schooled

Written by Get Schooled

Search by Topic

    Lists by Topic

    see all

    Be at the center of it all.


    Knowledge Ninjas

    a web-based service that allows software application end users to access a subject matter expert in real-time via a chat interface to resolve questions or problems they encounter in their specific software.