CSS box-decoration-break Property
CSS box-decoration-break property is used for specifying how the fragments of an element should be rendered if it is broken across multiple lines or columns or pages. The specified value of this property impacts the appearance of some properties such as border, background, border-image, box-shadow, clip-path, margin, and padding.
Syntax for box-decoration-break Property
Following is the syntax for the box-decoration-break property.
box-decoration-break: slice|clone|initial|inherit|unset;
Example: CSS box-decoration-break Property
Here in the example below, we are using the box-decoration-break property with different curving or cutting percentages, border styles, and their different values using clone or slice values. In this case, we have given the box-decoration-break value as clone. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Box-decoration-break property in CSS</title>
<style type="text/css">
.border-box {
background: linear-gradient(to bottom right, yellow, purple);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
padding: 0em 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 4;
box-decoration-break: clone;
}
</style>
</head>
<body>...
<span class="border-box">Study<br>Tonight<br>is the best place<br>to learn dogital .</span>
</body>
</html>
Output:
Example 2: CSS box-decoration-break Property
Here in the example below, we are using the box-decoration-break property with different curving or cutting percentages, border styles and their different values using clone or slice values. In this case, we have given the box-decoration-break value as slice. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Box-decoration-break property in CSS</title>
<style type="text/css">
.border-box {
background: linear-gradient(to bottom right, yellow, purple);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
padding: 0em 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 4;
box-decoration-break: slice;
}
</style>
</head>
<body>...
<span class="border-box">Study<br>Tonight<br>is the best place<br>to learn dogital .</span>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
22 |
22 |
| Edge |
79 |
79 |
| Firefox |
32 |
32 |
| Internet Explorer |
no |
no |
| Opera |
15 |
15 |
| Safari |
6.1 |
6.1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
32 |
32 |
| Opera Android |
14 |
14 |
| IOS Safari |
7 |
7 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the box-decoration-break property is slice. This property is applicable to all elements. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
