CSS - box-decoration-break Property

Quiz

CSS box-decoration-break property specifies how the background, border, border-image, box-shadow, margin, padding and clip-path of an element should behave when the content is broken across multiple lines or columns. It controls whether these properties should be continuous or fragmented across the line breaks.

Syntax

box-decoration-break: slice | clone | initial | inherit;

Property Values

Value	Description
slice	It means that the padding, border, and background of the element will be rendered as if the content were not broken, resulting in continuous rendering across line breaks. Default Value
clone	Each box fragment is rendered individually with its defined border, padding, and margin wrapping it. The border-radius and box-shadow are applied to each fragment separately.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Box Decoration Break Property

The following examples explain the box-decoration-break property with different values.

Box Decoration Break Property with Slice Value

To let the box decoration properties be rendered continuously such that they break at the edges of the element fragment, we use the slice value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      span {
         -webkit-box-decoration-break: slice;
         box-decoration-break: slice;
      }

      .box {
         background-color: lightblue;
         border: 5px solid green;
         padding: 10px;
         border-radius: 15px;
         line-height: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-decoration-break property
   </h2>
   <span class="box">
         CSS
      <br>
         box-decoration-break property 
      <br> 
         with slice
      <br>
         Value. 
      <br>
         See how the 
      <br> 
         properties are applied 
      <br>
         to the elements.
   </span>
</body>

</html>

Box Decoration Break Property with Clone Value

To let each individual element fragment have individual box decoration properties separately, we use the clone value. The value treats each element broken across multiple lines as individual element and applies the properties to each of them. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      span {
         -webkit-box-decoration-break: clone;
         box-decoration-break: clone;
      }

      .box {
         background-color: lightblue;
         border: 5px solid green;
         padding: 10px;
         border-radius: 15px;
         line-height: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-decoration-break property
   </h2>
   <span class="box">
      CSS
   <br>
      box-decoration-break property 
   <br> 
      with clone
   <br>
      Value. 
   <br>
      See how the 
   <br> 
      properties are applied 
   <br>
      to the elements.
   </span>
</body>

</html>

Supported Browsers

Property
box-decoration-break	22.0	79.0	32.0	6.1	11.5

css_reference.htm

Print Page