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

outline:1px solid white;

This won't add the extra width and height.

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

Depending on your intended browser support you can use the box-shadow property.

You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).

Example:

box-shadow: 0 0 0 1px black; // Outside black border 1px

or

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

One great advantage of using box shadow is you can get creative by using multiple box shadows:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.