box-decoration-break

Property Variable Name

box-decoration-break

Available Values for box-decoration-break

slice|clone|initial|inherit|unset

Example using box-decoration-break slice

Here is an example using different box-decoration-break values

Code

<style>
.demo-box-1 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:240px;
  width:100%;
  transition: all 0.3s;
}
.demo-box-1 .dbs-1 {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
.demo-box-1 .dbs-1 {
  transition: all 0.3s;
  position:absolute;
  box-decoration-break:slice;
}
</style>

<h2>Example using box-decoration-break slice</h2>
<p>Here is an example using different box-decoration-break values</p>
<div class='demo-box-1'>
  <div class='dbs-1'>Demo Box 1 Content 1</div>
</div>

Example using box-decoration-break clone

Here is an example using different box-decoration-break values

Code

<style>
.demo-box-2 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:240px;
  width:100%;
  transition: all 0.3s;
}
.demo-box-2 .dbs-2 {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
.demo-box-2 .dbs-2 {
  transition: all 0.3s;
  position:absolute;
  box-decoration-break:clone;
}
</style>

<h2>Example using box-decoration-break clone</h2>
<p>Here is an example using different box-decoration-break values</p>
<div class='demo-box-2'>
  <div class='dbs-2'>Demo Box 2 Content 1</div>
</div>

Example using box-decoration-break initial

Here is an example using different box-decoration-break values

Code

<style>
.demo-box-3 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:240px;
  width:100%;
  transition: all 0.3s;
}
.demo-box-3 .dbs-3 {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
.demo-box-3 .dbs-3 {
  transition: all 0.3s;
  position:absolute;
  box-decoration-break:initial;
}
</style>

<h2>Example using box-decoration-break initial</h2>
<p>Here is an example using different box-decoration-break values</p>
<div class='demo-box-3'>
  <div class='dbs-3'>Demo Box 3 Content 1</div>
</div>

Example using box-decoration-break inherit

Here is an example using different box-decoration-break values

Code

<style>
.demo-box-4 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:240px;
  width:100%;
  transition: all 0.3s;
}
.demo-box-4 .dbs-4 {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
.demo-box-4 .dbs-4 {
  transition: all 0.3s;
  position:absolute;
  box-decoration-break:inherit;
}
</style>

<h2>Example using box-decoration-break inherit</h2>
<p>Here is an example using different box-decoration-break values</p>
<div class='demo-box-4'>
  <div class='dbs-4'>Demo Box 4 Content 1</div>
</div>

Example using box-decoration-break unset

Here is an example using different box-decoration-break values

Code

<style>
.demo-box-5 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:240px;
  width:100%;
  transition: all 0.3s;
}
.demo-box-5 .dbs-5 {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
.demo-box-5 .dbs-5 {
  transition: all 0.3s;
  position:absolute;
  box-decoration-break:unset;
}
</style>

<h2>Example using box-decoration-break unset</h2>
<p>Here is an example using different box-decoration-break values</p>
<div class='demo-box-5'>
  <div class='dbs-5'>Demo Box 5 Content 1</div>
</div>