selector {
    box-sizing: content-box | border-box;
}
box-sizing
content-box vs. border-box
<div class="div-1">div-1</div>
<br>
<div class="div-2">div-2</div>
.div-1 {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    /* 전체 너비: 200px + (2 * 10px) + (2 * 5px) = 230px
       전체 높이: 100px + (2 * 10px) + (2 * 5px) = 130px
       content-box width: 200px
       content-box height: 100px */
}
.div-2 {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid blue;
    /* 전체 너비: 200px
       전체 높이: 100px
       content-box width: 200px - (2 * 10px) - (2 * 5px) = 170px
       content-box height: 100px - (2 * 10px) - (2 * 5px) = 70px */
}
실제 적용 모습
*,
::before,
::after {
    box-sizing: border-box;
}

caniuse.com에서 더 자세한 정보를 확인해 보세요.