border:2px solid red VS border:2px red solid

Question

Are both method valid? both works same.

border:2px solid red;

and

border:2px red solid;

Answer 1

Yes.

I always do border: 2px solid red but that's my personal choice.

It is just short hand for

element {
    border-width: 2px;
    border-color: red;
    border-style: solid;
}

Answer 2

It mostly works the same, but if you want to be safe use this order when specifying a shorthand for border

border-width
border-style
border-color

so

border:2px solid red;

Refer http://www.w3schools.com/css/css_border.asp - This is a good site to use as reference for issues like this.

Answer 3

W3.org (the official spec) says that the value for the border shorthand property is this:

[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

I'm not sure exactly why it says "top color" in there, but regardless it specifies that the order you should use is width, style, color. In other words, border: 2px solid red; from your example.

The other method is technically "undefined", but browsers usually display it correctly because there is no confusion between the style and colour values; there is currently no colour called "solid" or "dashed". Stick with the official method anyway.