box-decoration-break property

Intro, motto, greeting or tagline. A brief paragraph is the first thing you can see on most of the websites when you enter them. Most of them are multi-lined but also boring and plain. While breaking the text into multiple pieces you can create interesting effects that can convince the recipient to stay longer on the page. By adding just one parameter to the CSS you can make it way more interesting. Let's see how we can achieve it.

The box-decoration-break property specifies how an element will be rendered across multiple lines, columns and pages. It is really important to wrap your text in span tag instead of div to make this attribute work properly. Depending on what value it will get - it may break the element into fragments with new borders and space or let it stay as a continuous box at a line break. The property takes five values - initial, inherit, unset, slice and clone. For us two most important are:

• Slice - default value - keeps the break very visible as it doesn't copy the decorations at the edges. They are applied to the element as a whole and break at the edges of its fragments. Additional properties like border, padding or box-shadow are not inserted at a break.
• Clone - copies the decorations and applies them to the element as if they were individual parts. Each box fragment is rendered with specified properties wrapping each of it independently.

Both described values have a meaningful impact on the appearance of other properties. Different behaviour will have background, border, box-shadow, margin and padding attributes. As playing with spacing may be pretty easy to imagine the rest of them are more difficult to visualise without examples. To make it more clear let's talk about the difference between each property separately.

Let's start with the background property first. While using slice value the whole text is treated as one line and cut it into sections without multiplying the colour effect. An interesting thing you can observe in this example are the spaces between the words. The spacing on the breaks behaves exactly the same as background - the paddings are not applied to the edges. On the other hand, the clone value clips the background to the shape of in each line and applies it across all the lined of the text. For a better comparison of the effect, I decided to use a gradient instead of a solid colour. See the example below:

border is next really useful property that changes depending on box-decoration-break value. With clone the border is cropped in the edges. With slice the shape is copied across the broken lines along with padding and margin. Additional customisation which you can add to this attribute is border-image. By using it with image or gradient it will behave in the same way as colours in the previous example.

As we've seen in the above examples box-decorations-break property opens up a lot of possibilities in creating taglines and intros for websites. It lets us control how the box decorations will be drawn across the edges of the sliced element. Thanks to that we can create interesting designs across the lines of the text. It's really important to remember that despite using the -webkit prefix - the property still lacks any support in Internet Explorer and Edge. For more information please head over to the official documentation in MDN.