When coding a responsive site, one uses percentage based widths on your content which involves a little bit of math, but it’s actually super basic and can be handled by anyone with basic addition and multiplication skills.
Let’s say we want to add a border to our design. How do we do that? It turns out, we can’t set the border size as a percent, only a static value.
box-sizing: border-box; to the rescue! To my surprise this is supported by all browsers, except IE6 and IE7, which can be cured with a polyfill.
Beating Borders: The Bane of Responsive Layout →
A working example →