CSS3 box-decoration-break Property

Here is a brief explanation of how to control the broken elements in Css3.

Explanation

Property :

box-decoration-break:slice|clone

Usage:


box-decoration-break:slice;
box-decoration-break:clone;

Definition:

The box-decoration-break can help to maintain a consistent design among the fragments of a broken element. Box-decoration-break property allows you to tell the browser what to do with broken boxes.
Box-decoration-break: Clone tells the browser to apply these borders, as well as the paddings, to both parts of the box. The clone value tells the browser to clone borders and paddings for each part of the box, while the slice value, which is the default, tells the browser to do nothing.

It takes the following values.
  • slice : Default 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.

Example 1:


<span style='background: green;padding: 0em 1em;border-radius: 16px;border-style: solid;line-height: 2; -webkit-box-decoration-break: slice;-o-box-decoration-break: slice;box-decoration-break: slice;'>Box<br>Decoration<br>Slice</span>
Result:
Box
Decoration
Slice


Example 2:


<span style='background: green;padding: 0em 1em;border-radius: 16px;border-style: solid;line-height: 2; -webkit-box-decoration-break: clone;-o-box-decoration-break: clone;box-decoration-break: clone;'>Box<br>Decoration<br>Clone</span>

Result:
Box
Decoration
Clone



Ask Questions

Ask Question