CSS Quickie: box-decoration-break

The box model in CSS is probably the cornerstone of the language. it defines how elements are displayed and dictate how rules are applied. While appearing so rigid in the ruleset, the box model can be fluid as well. It can adjust the size based on the content and rules applied to it. When the content is bigger than what can fit on one line, this creates a line break.

There are times in some designs where there is some background or pseudo-element at the state that would be either great to carry over or duplicate. To do that we have box-decoration-break. This is a CSS rule that will allow you to have more control over how your box model displays for line breaks. There are two options: slice to split it up for each line and clone to duplicate the same rules for each line. Let’s look at some code.

.Element {
  background: #eeeeee;
  border-radius: 5px;
  height: auto;
  width: 200px;
}

/* Makes every line have the same styles applied to each line */
.Element--copy {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Makes every line take a part of the overall styles. Splitting it up */
.Element--copy {
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}