<div class="box-model" id="demo">
  I'm a box.
</div>
.box-model {
  background-image: 
    linear-gradient(#8db6c2, #8db6c2),
    linear-gradient(#c4cf8b, #c4cf8b), 
    linear-gradient(#fddc9b, #fddc9b);
  background-clip: 
    content-box, 
    padding-box, 
    border-box;

  padding: 40px;
  margin: 40px;
  border: 40px solid transparent;
  outline: 40px solid #f9cc9f;

  display: grid;
  place-items: center;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
}

padding.addEventListener("input", (e) => {
  demo.style.setProperty("--padding", `${e.target.value}px`);
});
border.addEventListener("input", (e) => {
  demo.style.setProperty("--border-width", `${e.target.value}px`);
});
margin.addEventListener("input", (e) => {
  demo.style.setProperty("--margin", `${e.target.value}px`);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.