Does it matter what order I use CSS border borders for my values?

Question

When I see the border-top property used by different authors, everyone says they use it in a different way.

For example, at http://www.w3schools.com/css/pr_border-top.asp it is defined in the following order:

 width style color 

If I define differently, for example color or style , will I get problems?

Answer 1

I assume that you are asking what problems may arise if you do not use the correct property order when using the short border tag. Also, you seem to be chosen by different definitions of the order of the properties.

I just quote the W3 CSS link for border cuts here:

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

So the only correct way to use the border-top abbreviation is 1. set the width, 2. style, 3. color. wrong

As Paul pointed out, the double strip "||" means that the properties can be displayed in any order , so browsers usually have no problems no matter what order you sketch them.

However: Usually I see definitions in the form border-top: 1px solid red; but it may just be “best practice,” but in the end it doesn't matter.

Answer 2

Like the moontear mentioned , the CSS 2 specification defines accepted border-top values ​​as follows:

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

Double bars mean width, style and color that can be used in any order. Therefore, according to the specification, you should not have problems if you use them in a different order.

I have never seen browsers have problems with different orders for this property.

Answer 3

Usually you will not have a problem: all browsers that I know will interpret your input as best as possible, even if it is not in the correct order.

However, adhere to the official order. This will avoid problems with other, less soft clients, parsers, etc.

Answer 4

Netbeans IDE 8+ only shows a color selector if you use this format:

 Border: red 1px solid; 

Does anyone know how to reorder:

 Border: 1px solid red;