CSS box-decoration-break Property
The box-decoration-break is a CSS property that specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element are set when the box is fragmented.
The box-decoration-break property has two values. The first value is "slice". The first part of the element is shown as if its box was not fragmented, then the showing of the box is sliced into pieces for each line, column, etc. The second value is "clone". Here each element is shown independently with specified properties (border, background, padding, margin). Borders wrap the four edges of each fragment of the element, and backgrounds are fully redrawn for each fragment.
| Initial Value | slice |
| Applies to | No. |
| Inherited | No. |
| Version | CSS3 |
| DOM Syntax | object.style.boxDecorationBreak = "clone"; |
Syntax¶
box-decoration-break: slice | clone | initial | inherit | unset;Here is an example with the "clone" value, where decorations apply to each fragment as if the fragments were individual elements.
Example of the box-decoration-break property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #1c87c9;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
}
span.box {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>Here the box-decoration-break is set to "clone".</p>
<span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</htmlExample of the box-decoration-break property with the "slice" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #ccc;
}
span.ex2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</html>Example of using the box-decoration-break property to create a sliced-box with shadow: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #cccccc;
box-shadow: 5px 4px 10px #666666;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span>Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</html>Values¶
| Value | Description |
|---|---|
| slice | Box decorations are set to the whole element and break at the edges of the element fragments. |
| clone | Box decorations are set to each fragment individually. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji