What is Border-Box

 

In this post, you will learn about Border-box and how it differs from other box-sizing values.

Border-box is a value of the box-sizing property, it defines how the width and height of an element are calculated.

SYNTAX:  box-sizing: border-box;

For example:

Before Applying Border-Box

<div class="box"></div>

<style>.box{

  padding: 0 20px;

  height: 100px;

  width:100px;

  border: 5px solid black;

}</style>

OUTPUT:

Here Total Width = 100px + 5px + 20px

---

AFTER Applying Border-Box

<div class="box1"></div>

<style>.box1{

 box-sizing: border-box;

  padding: 0 20px;

  height: 100px;

  width:100px;

  border: 5px solid black;

}</style>

OUTPUT:

Here Total Width = 100px (Padding and border are included in the width and height)