Pretty sure this is a CSS bug

Question

Replacing the border property with the box-shadow doesn't work as expected :\
You can clearly see how the position of the circles changes as you replace one property with the other. Please let me know if I'm wrong
---->https://code.sololearn.com/WB55GmHH7yaF/#css

Answer 1

among all the border cases

during display: block;
border-top-width creates the problem

during display: inline-block;
border-left-width creates the problem.

since margin is in %, for some reasons
border width * 3 times eats up the margin, for these 2 cases.

weird puzzle or bug , still not sure😁

I gave up
https://code.sololearn.com/WRofGRzj9NKR/?ref=app

Answer 2

Try both properties to see what's happening. It works as expected I think. Remember shadows are always offset slightly.

border:3px solid black;
box-shadow:inset 0 0 0 3px red;

Answer 3

This is rather strange! another magic happens when you change the "display" to "inline-block"