Add border to div increase div width?

I have a div as below, its width is 300px, then i add border to it 2px, my question is this that the 2px border cause that the width of div be 302px?

Thanks

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
}

<div class="test">
</div>

What you have stumbled across is the foundation of the CSS box-model.

You can play with it using the box-sizing property which has two possible values:

1. content-box (default)
2. border-box

content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin

(source: W3Schools.com)

By default, the border will add on to your container width/height.

See what happens when you use border-box:

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

This will ensure the width stays the same and inlcudes the box border.

As the border is around all the div, it is present both to its left and its right : You have to count its width it twice. So the final width will be 300 + 2*2 = 304px.