Well, you’re sort of right. But… border: 16px overwrites border: 1px solid gray; just below. This is intentional. Because I wanted to show “evolution” from previous example. The padding example does indeed show incorrect value, but I wasn’t able to get padding-box to work in jsFiddle anyway. The bottom line though, most devs end up using content-box and not padding-box at least until more consistent browser support. I already spent a lot of time just on this article alone, so let’s consider it case closed :)

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store