<article dir="ltr">
  <figure id="box_model">
    Content Box
    <span class="vertical scrollbar"></span>
    <span class="horizontal scrollbar"></span>
  </figure>
</article>

<form action="">
  <label for="show_scrollbars">Show scrollbars?</label>
  <input id="show_scrollbars" type="checkbox">
  
  <label for="inline_scrollbars">Inline scrollbars?</label>
  <input id="inline_scrollbars" type="checkbox">
</form>
@use postcss-preset-env {
  stage: 0;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*  scale the whole thing here  */
  font-size: min(2vmax, 2rem);
}

article {
  background: repeating-linear-gradient(-45deg, hsl(0 0% 70%), hsl(0 0% 70%) 1px, white 1px, white 10px);
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px hsl(0 0% 0% / .028),
    0 12.5px 10px hsl(0 0% 0% / .035),
    0 22.3px 17.9px hsl(0 0% 0% / .042),
    0 41.8px 33.4px hsl(0 0% 0% / .05),
    0 100px 80px hsl(0 0% 0% / .07);
  position: relative;
  
  &::before {
    content: "Margin Box";
    position: absolute;
    top: 1ex;
    left: 50%;
    transform: translateX(-50%);
    height: 3ex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5em;
    background: white;
    padding: .25rem 1rem;
    border-radius: 3rem;
  }
  
  &::after {
    content: "Outline & Box Shadow";
    position: absolute;
    top: 6ex;
    left: 0;
    width: 100%;
    height: 6ex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5em;
    color: white;
  }
}

figure {
  width: 25vmin;
  height: 25vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6ex;
  border: 3ex solid black;
  outline: 3ex solid hsl(270 50% 40% / 80%);
  padding: 3ex;
  background:
    linear-gradient(white, white) content-box,
    linear-gradient(hotpink, hotpink) padding-box;
  position: relative;
  
  &::after {
    content: "Padding Box";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6ex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5em;
  }
  
  &::before {
    content: "Border Box";
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 6ex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5em;
  }
  
  & > .scrollbar {
    background: hsl(0 0% 0% / 25%);
    position: absolute;
    visibility: hidden;
    
    &.vertical {
      width: 1ex;
      height: 100%;
      top: 0;
      right: 0;
    }
    
    &.horizontal {
      height: 1ex;
      width: 100%;
      bottom: 0;
      left: 0;
    }
  }
  
  &[scrollbars="true"] .scrollbar {
    visibility: visible;
  }
  
  &[inline-scrollbars="true"] {
    padding: 3ex 4ex 4ex 3ex;
  }
}

form {
  display: grid;
  grid-template-columns: 1fr auto;
  place-items: center;
  justify-items: flex-end;
  gap: 1rem;
  margin-block-start: 3rem;
  
  @media (height <= 640px) {
    & {
      grid-auto-flow: column;
      gap: .25rem;
      
      & > label:last-of-type {
        margin-inline-start: 2rem;
      }
    }
  }
}
View Compiled 
document.body.setAttribute('dir', 'ltr')

window.show_scrollbars.addEventListener('input', e =>
  window.box_model.setAttribute('scrollbars', e.target.checked))

window.inline_scrollbars.addEventListener('input', e =>
  window.box_model.setAttribute('inline-scrollbars', e.target.checked))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.