Peter Morlion logo


Browsers adding extra pixels to the width of textboxes

Apparently, when you set the width of a textbox, most browsers will add some pixels to it. I’m not entirely sure why they do this, but it can differ between browsers. To avoid this, you need to set the border of your textbox in CSS, and even then, you still need to subtract two pixels.

I made some fiddles to demonstrate what happens and how to solve it.

This is our initial problem:

So we set our border in CSS to 1 pixel, but it still isn’t enough:

So we have no other option than to set the width of our textbox separately:

Leave a Reply

Your email address will not be published. Required fields are marked *