<div>Default</div>
<div>padding-box</div>
<div>content-box</div>
<div>border-box</div>
div {
  width: 70px;
  height: 70px;
  float: left;
  margin: 8px;
  background: tomato;
  padding: 15px;
  border: 10px solid rgba(0,0,0,0.5);
}

div:nth-of-type(2) { background-clip: padding-box; }
div:nth-of-type(3) { background-clip: content-box; }
div:nth-of-type(4) { background-clip: border-box; }

body {
  padding: 20px;
  background: #f1f1f1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.