How to give border to any element using css without adding border-width to the whole width of element?

Question

How to give border to any element using css without adding border-width to the whole width of element?

Like in Photoshop we can give stroke- Inside , center and out

Answer 1

Check out CSS box-sizing...

The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.

• -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
• -moz-box-sizing: border-box; /* Firefox, other Gecko */
• box-sizing: border-box; /* Opera/IE 8+ */

I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp