Search code examples
cssbrowserborderdefaulttextinput

Why unstyled input text has a border width of 2px?

I have the following HTML markup which result to an input form element of type text.

<!DOCTYPE html>
<html>
    <body>
        <input type="text" />
    </body>
</html>

In a decent browser it render like the following screen capture (in the right side the zoomed image):

Sample

Then, why when inspecting the <input> element the browser show a border width of 2px? We can visually appreciate the input element has 1 pixel. Even with jQuery when I do something like jQuery('input').css('border-width') it spit out 2px.

Of course, this is happening only with unstyled form input elements.

I also created a JsFiddle demo:http://jsfiddle.net/HBDUZ/

Thanks!

Solution

  • Each browser has a built-in stylesheet (called a "user agent stylesheet"), which contains default styling for certain elements.

    In this case (Chrome 25 beta-m, Windows), the style is:

    border: 2px inset;

    The result of inset is really visible in this JSFiddle, with a contrasting background color.