CSS box-decoration-break Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The box-decoration-break property specifies when a break (page/column/region/line) splits a box, the property controls:
1. Whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments.
2. How the background positioning area is derived from the box fragments and how the element's background is drawn within them.

Initial value
slice
Applies to
All elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.boxDecorationBreak

Interactive Demo

This text breaks across multiple lines.

Syntax

box-decoration-break: slice | clone

Values

  • sliceNo border and no padding are inserted at a break; no box-shadow is drawn at a broken edge; border-radius does not apply to its corners; and backgrounds and the border-image are rendered for the whole box as if the box were unbroken.
  • cloneEach box fragment is independently wrapped with the border and padding. The border-radius and border-image and box-shadow, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element.

Example

<div class="multicol-3">
<div class="inner-box">
Fox - a predatory mammal of the canine family, the most common and largest species of the genus foxes.
</div>
</div>
.multicol-3  {
  width: 350px;
  padding: 5px;
  border: 1px solid black;
  margin: 30px;
  font: 12px/16px sans-serif;
  vertical-align: text-top;
  -webkit-columns: 70px 3; /* Safari and Chrome */
  -moz-columns: 70px 3; /* Firefox */
  columns: 70px 3; /* CSS3 */
}
.inner-box {
  border: 3px solid limegreen;
  padding: 10px;
  -webkit-box-decoration-break: clone; /* Safari and Chrome */
  box-decoration-break: clone; /* CSS */
}

Browser Support

The following table will show you the current browser support for the CSS box-decoration-break property.

Desktop
Edge Chrome Firefox Opera Safari
792232157
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1832147137

Last updated by CSSPortal on: 1st January 2024