CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



box-decoration-break

CSS is a powerful tool for designing and styling web pages. One of the many properties that CSS offers is the box-decoration-break property. This property allows you to control how the background, border, and padding of an element are displayed when the element is broken across multiple lines or pages.

Brief Explanation of Box-Decoration-Break

Box-decoration-break is a CSS property that controls how the background, border, and padding of an element are displayed when the element is broken across multiple lines or pages. By default, these properties are applied to the entire element, even if it is broken across multiple lines or pages. However, with box-decoration-break, you can control how these properties are displayed when the element is broken.

There are two values for the box-decoration-break property:

  • slice: This value applies the background, border, and padding to each broken piece of the element. This means that each piece will have its own background, border, and padding.
  • clone: This value applies the background, border, and padding to the entire element, even if it is broken across multiple lines or pages. This means that the background, border, and padding will be duplicated on each broken piece of the element.

Code Examples

Here are some examples of how to use the box-decoration-break property:

Example 1: Slice

In this example, we have a paragraph that is broken across multiple lines. We want each line to have its own background color and border. To do this, we use the slice value for the box-decoration-break property:

  
    p {
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      padding: 10px;
      box-decoration-break: slice;
    }
  

With this code, each line of the paragraph will have its own background color, border, and padding:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Example 2: Clone

In this example, we have a heading that is broken across multiple pages. We want the background color and border to be duplicated on each page. To do this, we use the clone value for the box-decoration-break property:

  
    h1 {
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      padding: 10px;
      box-decoration-break: clone;
    }
  

With this code, the background color and border will be duplicated on each page that the heading is displayed:

Conclusion

The box-decoration-break property is a useful tool for controlling how the background, border, and padding of an element are displayed when the element is broken across multiple lines or pages. By using the slice or clone value, you can control how these properties are displayed and ensure that your design looks consistent and professional.

References

Activity