CSS box-decoration-break Control Fragmented Elements

Learn about the CSS box-decoration-break property, which controls the appearance of fragmented elements.

Use 'slice' for continuous decorations or 'clone' for separate fragments.

Introduction

The box-decoration-break property in CSS controls how an element’s box decorations (like background, border, padding, margin, and box-shadow) are displayed when the element is split across multiple lines, columns, or pages. This is defined in the CSS Fragmentation Module Level 3 specification.

Description

The box-decoration-break property determines how an element’s box decorations are handled when the element is fragmented due to layout constraints. It has two main values: slice and clone. The slice value makes the decorations look continuous across the fragments, while the clone value applies the decorations to each fragment individually.

Syntax

The box-decoration-break property can be set using the following syntax:

box-decoration-break: slice;
box-decoration-break: clone;
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;

slice: Applies decorations continuously across fragments.
clone: Applies decorations to each fragment separately.
inherit: Inherits the value from the parent element.
initial: Sets the property to its default value (slice).
revert: Resets the property to the user agent’s default.
revert-layer: Resets the property to the value established by the closest ancestor with a specified value.
unset: Resets the property to its natural value.

Values

slice:
- Applies decorations continuously across fragments.
- Example: A background color will look continuous across split lines.
clone:
- Applies decorations to each fragment separately.
- Example: Each fragment of an element with a border will have its own border.
inherit:
- Inherits the value from the parent element.
initial:
- Sets the property to its default value (slice).
revert:
- Resets the property to the user agent’s default.
revert-layer:
- Resets the property to the value established by the closest ancestor with a specified value.
unset:
- Resets the property to its natural value.

Formal Definition

Initial Value: slice
Applies To: All elements
Inherited: No
Computed Value: As specified
Animation Type: Discrete

Examples

Inline Box Fragments

An inline element with box decorations might look odd when it contains line breaks due to the initial slice value. The following example shows how adding box-decoration-break: clone to a <span> with <br> tags can change its appearance:

<!DOCTYPE html>
<html>
<head>
    <title>box-decoration-break property</title>
    <style>
        body {
            display: flex;
            background-color: grey;
            justify-content: space-around;
        }

        span {
            padding: 0em 1em;
            border-radius: 1rem;
            border-style: solid;
            margin: 1rem;
            font: 22px sans-serif;
            line-height: 2;
            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;
        }
    </style>
</head>

<body>
    <p>
        <span>The<br />quick<br />orange fox</span>
    </p>
    <p>
        <span id="clone">The<br />quick<br />orange fox</span>
    </p>
</body>
</html>

Block Box Fragments

This example shows how block elements with box decorations look when they contain line breaks in a multi-column layout. Notice how box-decoration-break: slice would make the decorations look continuous, while clone applies them to each fragment separately:

<!DOCTYPE html>
<html>
<head>
    <title>box-decoration-break property</title>
    <style>
        body {
            background-color: grey;
        }

        span {
            padding: 0em 2em;
            border-radius: 250px;
            border-style: solid;
            margin-left: 1em;
            font: 20px sans-serif;
            line-height: 1.5;
            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;
        }
    </style>
</head>

<body>
    <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>
</body>
</html>