Borders are dumb in CSS. There’s nothing inherently “real” about borders. Good design is natural and there’s nothing natural about borders. Take a look at the items around you. Are there any real objects that have a natural border?
If an object A is placed on top of another object B, we get a natural faux-border. That is, a gap between the top of object B and the bottom of object A. That buddy boy, is called a shadow.
continued…
A border is really an abstract idea; It’s used to describe the edge of an entity, but when do we ever color the very edge of anything? Theoretically, that is impossible. It seems to me, borders are the result of a lack of critical thinking and CSS borders are anachronisms of the lack of 3D capabilities in the browser years ago.
In order to implement the boundaries between two objects that have the exact same height (which is again, not possible), use a margin. (Rethink this…)
Conclusion: use a shadow, never a border if necessary.