Default Textbox Border-Style and Width

default border color for .net textbox

You can write two CSS classes:

.tb_with_border {
 border: 1px #FF0000 solid;
}

.tb_without_border {
 border: none;
}

.. and then you can change styles by assigning CssClass property of your textbox, for example:

Textbox1.CssClass = "tb_without_border";

or in markup:

<asp:TextBox id="Textbox1" runat="server" CssClass="tb_with_border" />

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:

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.
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.
When you set all border properties, you get CSS-controlled rendering.

Is there a way to set a default border color/size in CSS?

What you're doing with the * rule is fine. What you're trying to do on individual elements is set the border style. You will need to use the border-style component property for that, rather than the border shorthand as the shorthand will override the width and color with their initial values (which are medium and currentColor respectively):

#streak {
  border-bottom-style: solid;
}

Of course, this means you can continue using the shorthand in situations where you do want to override the global width and color with other values.

Default input borders in Chrome

That's because the input element on Chrome inherits from its stylesheet

 -webkit-appearance:textfield;

And textfield has just 1px light-grey borders.

Try to add the following and you will see that also the input will have the same border inset even if white:

.border-test {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 50px;
  border: 2px inset;
  margin: 8px;
  background-color: white;
  -webkit-appearance: none;
}

Jsfiddle: http://jsfiddle.net/a_incarnati/zqmbvn7v/1/

Border color on default input style

I would have thought this would have been answered already - but surely what you want is this:
box-shadow: 0 0 3px #CC0000;

Example:
http://jsfiddle.net/vmzLW/

Input border CSS

You need to use the box-sizing to border-box to add width as well, as border too takes up its own width:

* {

  box-sizing: border-box;

}

#wrapper {

  width: 170px;

}

textarea {

  border-color: #eee;

  border-width: 1px;

}

label, textarea, input {

  width: 100%;

  display: block;

}

input {

  border-style: solid;

  border-width: 1px;

}

<div id="wrapper">

  <form>

    <label for="comments">Comments</label>

    <textarea name="comments" rows="5"></textarea>

    <label for="date">Date</label>

    <input type="text" name="date">

    <label for="time">Time</label>

    <input type="text" name="time">

    <label for="longitude">Longitude</label>

    <input type="text" name="logitude">

    <label for="latitude">Latitude</label>

    <input type="text" name="latitude">

  </form>

</div>

HTML input default chrome border-color override with CSS not working

In order to use border-color in this way, you would need to set the width and style:

border-color: red;
border-style: solid;
border-width: 15px;

Alternatively, you can set border: 1px solid blue; and then after that, override just the color using border-color: red;. This works, but only because the wodth and style have already been set.

default input border shows differently on div

OK fount it

input has the -webkit-appearance:textfield; style on it

div {

  border: 2px inset;

  -webkit-appearance: textfield;

  height: 15px;

  width: 169px;

}

<input>

<br><br>

<div></div>

How to change textbox border color and width in winforms?

You could do the following:

Place the TextBox inside a Panel
Give the panel 1 pixel padding
Set the text dock to Fill
Make the text box to have no border

Then, handle mouse events on the text box, switch the background color of the panel between your two colors, when the mouse enters/leaves.

This isn't the most elegant approach in terms of using resources/handles but it should work without any custom drawing.