Unwanted Space in Border Transition - css

Question

I made a border transition for a div in CSS that basically has the border become visible in a clock-work manner.
Here it is
Hover over the gray rectangle to see it.
The code below just here since site asks me for it, please see link.
<div class="outerBox"></div>
However, as you can see in the pen, there is space between the edges of the gray rectangle and the border, and the ends don't meet up correctly.
Any ideas as to why this could be happening?
Update
Actually, found the solution.

Answer 1

I discovered that the issue had to do with the way the width of the border was changing the div element's box-size.
Basically, making the border 2px was adding 2px of width (on each side I believe) to the div element and was thus causing the space and un-met ends.
The solution was to add the declaration
box-sizing: border-box;
to the ::before and ::after pseudo elements (and just to be safe I added it to the div element) and then the width of the div element was no longer affected by the border width.
If you click on the link in my question, you'll see that the border now encloses the rectangle nicely.
To see the previous state, just comment out the box-sizing: border-box; declaration instances.

Answer 2

One even easier solution with multiple backgrounds:
* {
box-sizing: border-box;
}
body {
background: silver;
}
.box {
background-color: white;
height: 10em;
margin: 2em auto;
width: 10em;
}
.box:hover {
animation: border 1s linear forwards;
background-image: linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
#keyframes border {
0% {
background-size: 0% 4px, 4px 0%, 0% 4px, 4px 0%;
}
25% {
background-size: 100% 4px, 4px 0%, 0% 4px, 4px 0%;
}
50% {
background-size: 100% 4px, 4px 100%, 0% 4px, 4px 0%;
}
75% {
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 0%;
}
100% {
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
}
}
<div class="box"></div>