Tillitsdone
down Scroll to discover

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.
thumbnail

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

  1. slice:

    • Applies decorations continuously across fragments.
    • Example: A background color will look continuous across split lines.

  2. clone:

    • Applies decorations to each fragment separately.
    • Example: Each fragment of an element with a border will have its own border.

  3. inherit:

    • Inherits the value from the parent element.

  4. initial:

    • Sets the property to its default value (slice).

  5. revert:

    • Resets the property to the user agent’s default.

  6. revert-layer:

    • Resets the property to the value established by the closest ancestor with a specified value.

  7. 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>

Browser Compatibility

The box-decoration-break property is supported by most modern web browsers, including:

  • Google Chrome
  • Firefox
  • Edge 79
  • Opera
  • Safari

However, it is not supported by Internet Explorer.

See Also

For more information on related CSS properties, you can refer to:

These properties are useful for controlling the behavior of elements when they are fragmented across multiple lines, columns, or pages.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
CSS property CSS animation
css_property_cover/css-property-background-repeat.png CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round. css_property_cover/css-property-border-image-repeat.png CSS Border-Image-Repeat Customizing Border Images CSS border-image-repeat allows customization of border images. Use options like stretch, repeat, round, and space to create unique designs. Enhance visuals with ease. css_property_cover/css-property-border-top-right-radius.png CSS Border-Top-Right-Radius Round Corners Easily Learn how to use the CSS border-top-right-radius property to round the top-right corner of elements. Options include length and percentage values for circular or elliptical corners. css_property_cover/css-property-empty-cells.png CSS Empty-Cells Enhance Table Design Learn how to use CSS empty-cells to control the appearance of empty table cells. Choose 'show' or 'hide' to create cleaner, more visually appealing tables. css_property_cover/css-property-border-image-source.png CSS border-image-source Mastering Custom Border Designs Learn about CSS border-image-source, a powerful tool for creating unique border designs using images or gradients. Explore its use cases, syntax, and compatibility. css_property_cover/css-property-border-left.png CSS border-left Customize Left Borders Easily Learn how to use the CSS border-left property to customize the left border of elements. Discover available options for width, style, and color.
View all 337 CSS blogs
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
209 Articles
Explore right
icons/logo-react.svg ReactJs
Popular JavaScript library for building user interfaces with a component-based architecture.
169 Articles
Explore right
icons/flutter.svg Flutter
UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
150 Articles
Explore right
icons/logo-nodejs.svg Nodejs
JavaScript runtime for building scalable, high-performance server-side applications.
60 Articles
Explore right
icons/next-js.svg Nextjs
React framework enabling server-side rendering and static site generation for optimized performance.
40 Articles
Explore right
icons/code-outline.svg Typescript
Superset of JavaScript adding static types for improved code quality and maintainability.
39 Articles
Explore right
icons/tailwind.svg TailwindCSS
Utility-first CSS framework for rapid UI development.
130 Articles
Explore right
icons/code-outline.svg Golang
Programming language known for its simplicity, concurrency model, and performance.
70 Articles
Explore right
icons/code-outline.svg AstroJs
Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.
40 Articles
Explore right
icons/code-outline.svg Jest
Versatile testing framework for JavaScript applications supporting various test types.
337 Articles
Explore right
icons/css-4.svg CSS
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
DesignRush web design companies DesignRush
web design companies Goodfirms Goodfirms
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.