Tailwind CSS - Box Decoration Break

Previous
Quiz
Next

Tailwind CSS Box Decoration Break is a utility class demonstrating how decoration properties such as border, background, border image, box-shadow, clip-path, margin, and padding should be rendered across multiple lines, columns, or pages when elements are fragmented.

Tailwind CSS Box Decoration Break Classes

The following is the Tailwind CSS Box Decoration Break Classes list that effectively shows how element fragments should be rendered across multiple lines, columns, or pages.

Class CSS Properties
box-decoration-clone box-decoration-break: clone;
box-decoration-slice box-decoration-break: slice;

Functionality of Tailwind CSS Box Decoration Break Classes

  • box-decoration-clone: This class replaces CSS box-decoration-break: clone; property. It applies box decorations to each element fragment as if the fragments were individual elements.
  • box-decoration-slice: This class replaces CSS box-decoration-break: slice; property. It has a default behavior, Box decorations are applied to the element as a whole and break at the edges of the element fragments.

Tailwind CSS Box Decoration Break Classes Examples

Below example will illustrate the Tailwind CSS Box Decoration Break classes.

Demonstrating Box Decoration Clone Class

The following example is demonstrating the use of Box Decoration Clone Class.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-5">
    <h2 class="text-3xl mb-3">
        Tailwind CSS - Box Decoration Clone Class
    </h2>
    <span class="box-decoration-clone 
                 bg-gradient-to-r 
                 from-indigo-600 
                 to-pink-500 text-2xl
                 text-white px-2"> 
        Tailwind CSS<br>
        Box Decoration Clone<br>
        Example
    </span>
</body>

</html>

Demonstrating Box Decoration Slice Class

The following example is demonstrating the use of Box Decoration Slice Class.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-5">
    <h2 class="text-3xl mb-3">
        Tailwind CSS - Box Decoration Clone Class
    </h2>
    <span class="box-decoration-slice 
                 bg-gradient-to-r 
                 from-indigo-600 
                 to-pink-500 text-2xl
                 text-white px-2"> 
        Tailwind CSS<br>
        Box Decoration Clone<br>
        Example
    </span>
</body>

</html>
Print Page
Previous
Next
Advertisements