Free CSS Box Sizing Visualizer & Layout Tool

Interactive tool to understand the difference between content-box and border-box models.

Configure Dimensions

content-box
Content
Outer Width: 0px
border-box
Content
Outer Width: 0px

Generated CSS 


/* Box 1 */
.content-box {
  box-sizing: content-box;
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 10px solid #4338ca;
}

/* Box 2 */
.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 10px solid #065f46;
}