Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Box Decoration Break
#1
Description:

The box-decoration-break property allows you to control how backgrounds, borders, and box shadows behave when an element is broken across multiple lines.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Box Decoration Break Example</title>
  <style>
    .decorated-text {
      background-color: lightblue;
      padding: 10px;
      border: 2px solid red;
      box-shadow: 5px 5px 5px grey;
      box-decoration-break: clone;
      /* OR use 'slice' value for different effect */
      /* box-decoration-break: slice; */
    }
  </style>
</head>
<body>
  <p class="decorated-text">This is a long text that wraps across multiple lines and the box decoration remains consistent.</p>
</body>
</html>

Explanation:

In this example, the .decorated-text paragraph has a background color, padding, border, and box shadow applied to it. By default, when text wraps across multiple lines, the box decorations are repeated for each line. The box-decoration-break: clone property ensures that the box decorations remain consistent even when the element breaks across lines.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
Reply


Messages In This Thread
CSS Box Decoration Break - by Qomplainerz - 07-26-2023, 07:49 PM

Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 658 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 444 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 367 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 381 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 382 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 389 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 366 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 392 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 343 07-26-2023, 07:05 PM
Last Post: Qomplainerz
  CSS Custom properties (Variables) Qomplainerz 0 285 07-26-2023, 07:04 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 4 Guest(s)