box-decoration-break

Definition

box-decoration-break is a CSS property that specifies how the background and border of an element is rendered when the element is broken across multiple boxes. The possible values are slice, which cuts the background and border across the element, and clone, which replicates the background and border across the element.

Examples

To slice the background and border of an element across multiple boxes:

div {
  box-decoration-break: slice;
  background-color: blue;
  border: 1px solid black;
}

To replicate the background and border of an element across multiple boxes:

p {
  box-decoration-break: clone;
  background-image: url(bg.png);
  border-radius: 10px;
}

To slice the background and border of an element with a specific class across multiple boxes:

.myclass {
  box-decoration-break: slice;
  background-color: red;
  border-left: 2px solid green;
}

Values

Best Practices

• Test your design across all major browsers to ensure that the intended behavior is achieved, as some browsers may have different implementations of this property.
• Keep in mind that some CSS properties, such as border-radius, may not work as expected when box-decoration-break is set to clone.
• Consider the desired visual outcome and choose the appropriate value for the property based on that outcome. For example, if you want to maintain the same border around all boxes, use slice; if you want to show different borders on each box, use clone.
• Be aware that box-decoration-break is not supported in some older browsers, so you may need to provide fallback styles for those browsers.

Browser Compatibility