How to set <input> border

Question

I am not sure how to call this kind of feature but my question is, is there a way to set the color of the following effect:

Using just border doesn't make it.

Answer 1

Use the outline property:

input:focus { outline: 2px orange solid }

outline works in all modern browsers except for IE < 8.

The :focus pseudo-class works in all modern browsers except IE - you would have to use a JavaScript workaround for that as shown here.

However, you will not be able to duplicate the desired effect (which seems to be Chrome's default behaviour when focusing on a field?) entirely because outline doesn't have a radius property. Maybe @Sarfraz' suggestion is a suitable workaround for that.