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

Question

Are there both methods? both work the same way.

border:2px solid red;

and

border:2px red solid;

Answer 1

W3.org (the official specification) says that the value for the bordershorthand property is as follows:

<line-width> || <line-style> || <color>

Thus, it indicates 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 style and color values; there is currently no color called “solid” or “dotted”. In any case, stick to the official method.

Answer 2

.

border: 2px solid red, .

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

Answer 3

It basically works the same way, but if you want to be safe, use this order when specifying the abbreviation for the border

border-width
border-style
border-color

So

border:2px solid red;

See http://www.w3schools.com/css/css_border.asp - This is a good site to use as reference on such issues.