box-decoration-break CSS property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
Try it
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
<section id="default-example">
<div id="example-container">
<span id="example-element">This text breaks across multiple lines.</span>
</div>
</section>
#example-container {
width: 14rem;
}
#example-element {
background: linear-gradient(to bottom right, #6f6f6f, black);
color: white;
box-shadow:
8px 8px 10px 0 #ff1492,
-5px -5px 5px 0 blue,
5px 5px 15px 0 yellow;
padding: 0 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 2;
}
Syntax
css
/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;
The box-decoration-break property is specified as one of the keyword values listed below.
Values
slice-
The element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.
clone-
Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The
border-radius,border-image, andbox-shadoware applied to each fragment independently. The background is also drawn independently for each fragment, which means that a background image withbackground-repeat: no-repeatmay nevertheless repeat multiple times.
Description
The specified value will impact the appearance of the following properties:
Formal definition
| Initial value | slice |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
box-decoration-break =
slice |
clone
Examples
Inline box fragments
An inline element with a box decoration may have unexpected appearance when it contains line breaks due to the initial slice value.
The following example shows the effect of adding box-decoration-break: clone to a <span> that contains <br> tags:
css
span {
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
}
#clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<p>
<span>The<br />quick<br />orange fox</span>
</p>
<p>
<span id="clone">The<br />quick<br />orange fox</span>
</p>
Block box fragments
The following example shows how block elements with box decoration look when they contain line breaks in a multi-column layout.
Notice how the result of box-decoration-break: slice would be the equivalent of the first <div> if stacked vertically.
css
span {
display: block;
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
inset 8px 8px 10px 0px deeppink,
inset -5px -5px 5px 0px blue,
inset 5px 5px 15px 0px yellow;
}
#base {
width: 33%;
}
.columns {
columns: 3;
}
.clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<div id="base">
<span>The<br />quick<br />orange fox</span>
</div>
<br />
<h2>'box-decoration-break: slice'</h2>
<div class="columns">
<span>The<br />quick<br />orange fox</span>
</div>
<h2>'box-decoration-break: clone'</h2>
<div class="columns">
<span class="clone">The<br />quick<br />orange fox</span>
</div>
Specifications
| Specification |
|---|
| CSS Fragmentation Module Level 3 # break-decoration |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
box-decoration-break
|
|
|
|
|
|
|
|
|
|
|
|
|
clone
|
|
|
|
|
|
|
|
|
|
|
|
|
slice
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.