<div class="wrapper">
  <div class="box content-box">
    <span>box-sizing: content box</span>
    <span>total width: <span id="cbox-width"></span>px</span>
  </div>
  <div class="box border-box">
    <span>box-sizing: border box</span>
    <span>total width: <span id="bbox-width"></span>px</span>
  </div>
</div>
.wrapper {
  padding: 2rem;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid #B0B0B0;
  background: #DEDEDE;
  margin: 1rem auto;
}

.content-box {
  // content-box is default box-sizing value
  // box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
View Compiled
const cbox = document.querySelector('.content-box')
const {width: cboxWidth} = cbox.getBoundingClientRect()

document.getElementById('cbox-width').innerHTML = cboxWidth;

const bbox = document.querySelector('.border-box')
const {width: bboxWidth} = bbox.getBoundingClientRect()

document.getElementById('bbox-width').innerHTML = bboxWidth;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.