CSS box-decoration-break Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The box-decoration-break property in CSS is used to specify how the background, padding, border, and margin of an element are applied when the element's box is fragmented. This can happen, for example, when an element spans multiple lines, columns, or pages. By using this property, you can control whether these decorations are applied to each fragment separately or treated as a continuous box.

💡 Syntax

The syntax for the box-decoration-break property is simple and consists of two possible values.

Syntax

Copied

element {
  box-decoration-break: slice | clone;
}

🎛️ Default Value

The default value of the box-decoration-break property is slice.

🏠 Property Values

Value	Description
slice	The box decorations are applied as though the element is not fragmented. This means background, border, and padding are continuous across the fragments.
clone	Each box fragment is treated as a separate element with its own box decorations. This means background, border, and padding are applied to each fragment independently.

📄 Example

In this example, we'll demonstrate the difference between slice and clone using a multi-column layout.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS box-decoration-break Example</title>
  <style>
    .container {
      column-count: 2;
      column-gap: 20px;
    }

    .slice {
      box-decoration-break: slice;
      background: lightblue;
      padding: 10px;
      border: 2px solid blue;
    }

    .clone {
      box-decoration-break: clone;
      background: lightcoral;
      padding: 10px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <h1>box-decoration-break: slice vs. clone</h1>
  <div class="container">
    <p class="slice">
      This paragraph uses <code>box-decoration-break: slice</code>. The background, padding, and border are continuous across the columns.
    </p>
    <p class="clone">
      This paragraph uses <code>box-decoration-break: clone</code>. Each column fragment has its own background, padding, and border.
    </p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The box-decoration-break property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The box-decoration-break property provides web developers with control over how box decorations are applied to fragmented elements. Whether you want a continuous look or distinct decorations for each fragment, this property helps you achieve the desired visual effect. Experiment with slice and clone to see how they can enhance the presentation of your content.