Categories
CSS Web development

CSS box-decoration-break Property

CSS box-decoration-break Property

The CSS box-decoration-break property defines how the background, border, border-image, box-shadow, clip-path, margin, and padding of an element is applied when the box for the element is fragmented.

Syntax:

box-decoration-break: slice|clone;

slice (default) – box decorations are applied to the element as a whole and break at the edges of the element fragments.

clone – box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex-1, .ex-2 {
  border: 5px solid #2a9d8f;
  padding:  0 20px;
  border-radius: 25px;
  font-size: 24px;
  line-height: 2;
}

.ex-1 { 
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ex-2 { 
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
</style>
</head>
<body>

<h4>box-decoration-break: clone;</h4>
<span class="ex-1">Learn<br>how<br>to <br>code.</span>

<h4>box-decoration-break: slice;</h4>
<span class="ex-2">Learn<br>how<br>to<br>code.</span>

</body>
</html>

Output:

box-decoration-break: clone;

Learn
how
to
code.

box-decoration-break: slice;

Learn
how
to
code.

Enjoy coding!

Read also:

CSS clip-path Property

CSS Perspective Property, CSS Perspective-origin Property & 3d Cube