Chrome default borders on input text

Browsers have different oddities in rendering input elements, for historical reasons. Early implementations used built-in routines for them, so that the rendering was more or less immune to anything you tried to say in CSS. Common defaults stem from those implementations, and for compatibility, to make old pages display the way they used to, modern implementations “fall back” to old rendering when CSS is not used to set key properties such as border.

This means that conceptually there is a rendering layer above the normal CSS based layer, and if “sufficient” rendering rules are not set in CSS, the element is rendered the old way.

For example, if you have just <input> and you check its CSS properties using getComputedStyle (a more direct way than the jQuery way, but gives the same result, you get the computed CSS properties. Basically, that’s border: inset 2px, defaulting the border color to content color (usually black by default). But they only reflect the values used when the element is rendeder under full control of CSS. Here they are not, and the internal browser default rendering is used. In Chrome, this means that the border is solid grey 1px and there is a padding of 1px.

If you set e.g. border-color only, the initial browser default rendering is suppressed and CSS-controlled rendering is used instead. This means that you get an inset 2px border of the color you specified, instead of getting the browser default rendering with just the color changed.

This is confusing, but on the practical side, it’s rather simple: If you want browser default rendering for the border of an input element, don’t set any border properties on it. If you don’t want that, set all browser properties to the values you want.

Regarding the specific questions:

1. The color information rgb(238, 238, 238) in Chrome dev tools is probably a bug caused by some interference between the rendering methods. Note that it is very light grey and does not correspond to the actual color used. It is probably the color that would be used as the lighter color in an inset border.
2. You get the computed color the way you are using or with getComputedStyle, but it relates to CSS-controlled rendering only and does not apply to <input> without any style sheet settings beyond browser style sheet.
3. When you set all border properties, you get CSS-controlled rendering.