—⁂—
border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent.
border-box is incompatible with ratios: you need content-box there.
border-box is only actually useful for things like making body fill the viewport.
See also what I wrote in https://news.ycombinator.com/item?id=29357636
—⁂—
Elucidating a bit more: there’s only a difference if you have border or padding, and I just find it increasingly rare for border-box to be in any way useful, because we’re generally separating layout.
Consider the row/column thing in Neat here: do you use margin on the children, or gap on the parent? Consensus is that gap on the parent is normally better: let the child be itself, and handle layout concerns at a higher level. That fits with why I say content-box is the better model for the web, the model that you should aim to think in terms of: treat border and padding as semantically part of a parent, automatically-sized component, and so if you are specifying your own dimensions, specify them relative to the content, because the border and padding are layout concerns.
Designers tend to prefer layout to lead content, because that’s what’s easiest for them. I prefer to have content lead layout, choosing dimensions to fit the content and letting the layout size itself around that.
All up, it’s still fairly nebulous, based around concepts and broad design patterns rather than concrete demonstrations, and that’s part of the reason I haven’t written it up more fully—I need to make a compelling case if I want to present it at all. (Another reason is that I just haven’t been doing any of them, really; my potential-blog-posts notes file has about 38 entries and 6,000 words, and I have another dozen or two drafts in my site, but I haven’t been focusing on that stuff recently.)