Why isn't my browser displaying the exact size of my border when defined in my HTML?

Why the browser isn't showing the exact size of my border as mentioned in my html file?

I am trying to study the box model in CSS and so I created a box and defined some properties but inspecting the border size it isn't the exact as I mentioned in my code and everything else is fine.

.box {
  height: 400px;
  width: 400px;
  background-color: black;
  border-left: 5px solid red;
  border-right: 5px solid red;
  border-top: 5px solid red;
  border-bottom: 5px solid red;
  padding: 10px;
  margin: 10px;
}

.white {
  height: 50%;
  width: 50%;
  background-color: red;
  border: 2px solid black;
  margin: 10px;
}

<div class="box">
  <div class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa</div>
</div>

here as we can see in the code border size is 5px on each side but on inspecting in Chrome or Firefox the border size is 4.8px on each side.