box-decoration-break property
Tags: tutorial, css, beginners, webdev
Published: 2020-01-22 10:25:44

---
title: box-decoration-break property
published: true
date: 2020-01-20 23:31:40 UTC
tags: #tutorial,#CSS, #beginner, #webdev
canonical_url: https://itsmenatalie.com/blog/2020/01/blog/box-decoration-break-property/
cover_image: https://cdn.sanity.io/images/0ugmrqfk/production/29c7116b7d40a62b0350bdf22fdaf06ba1579069-1920x1195.jpg?rect=0,57,1920,1080&w=1200&h=675&auto=format
---

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:
* <b>Slice</b> - 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.
* <b>Clone</b> - 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:
{% codepen https://codepen.io/ItsMeNatalie/pen/ymvEQB %}

`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.
{% codepen https://codepen.io/ItsMeNatalie/pen/WNbpmYN %}

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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break" target="_blank">the official documentation in MDN</a>.