background-clip example

background-clip property in CSS

HTML

<div id="b1">Padding-box</div>
      <div id="b2">Content-box </div>
      <div id="b3">Border-box</div>

CSS

/* border-box to all */
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}


/**
 * 1. Make border transparent, so we can see background through (if applied).
 * 2. Background will be applied to padding-box. It will exclude borders.
 * 3. Background will be applied to content only. It will exclude border, padding.
 */


div {
  background: red;
  text-align:center;
  padding:10px 10px;
  margin: 25px 0;
  border:10px solid rgba(100, 100, 100, .3);      /*[1]*/
}
#b1 {
  background-clip: #b1;                   /*[2]*/
}
#b2 {
  background-clip: content-box;                   /*[3]*/
}