css
  1. css-box-decoration-break
PreviousNext

CSS box decoration break

  • The box-decoration-break property in CSS controls the rendering of an element's box decorations (such as borders and backgrounds) when the box is broken across multiple lines or columns.
  • It allows for greater control over the presentation of your content, particularly for long paragraphs or other elements that may be split across multiple lines.

Syntax:

box-decoration-break: slice | clone;

The box-decoration-break property can be set to either slice or clone.

  • slice: The box decoration is divided into slices at the break point.
  • clone: The box decoration is cloned at the break point.

Example

div {
  box-decoration-break: slice;
  background-color: lightblue;
  border: 3px solid blue;
}
Try Playground

Explanation

In the above example, the box-decoration-break property is set to slice. This means that the background color and border of the <div> element will be split into slices at the point where the box is broken across multiple lines or columns. In this case, the background color and border will be broken into slices at the end of the first line of text.

Use

The box-decoration-break property is most commonly used in long paragraphs or other text-heavy elements that may be split across multiple lines or columns. It can be particularly useful for creating visually appealing and consistent layouts that maintain design continuity even when elements are broken across multiple lines.

Important Points

  • The box-decoration-break property only affects elements that have a border, background, or outline applied.
  • When box-decoration-break is set to clone, the box decorations will be replicated at the break point, which can result in duplicated content.
  • When box-decoration-break is set to slice, the box decorations will be divided into slices at the break point, resulting in a potentially jagged or uneven appearance.

Summary

The box-decoration-break property in CSS is a useful tool for controlling the rendering of a box's decorations when it is broken across multiple lines or columns. By setting the property to slice or clone, you can control how the box decorations are divided or replicated at the break point. Keep in mind that this property should only be used on elements with borders, backgrounds, or outlines, and that it may result in duplicated or uneven content depending on the setting.

OpacityDirection
Published on: