![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS box-decoration-break Property
![CSS box-decoration-break Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-box-decoration-break.webp)
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.
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS box-decoration-break Property), please comment here. I will help you immediately.