Take the 2-minute tour ×

Somewhat related to this question.

Outline and border are pretty similar (although they do have their differences, as explained in the referenced question), but they use exactly the same properties/values in the opposite order. For example:

border: 1px solid black;
outline: black solid 1px;

To me, this seems to be a glaring inconsistency that should have been avoided. When using both borders and outlines, it is easy to mix up the order and write invalid CSS. Is there any known reason these two similar items have the same values written in the opposite order?


It seems (at least in IE8) that both can (sometimes) accept the values in either order and work fine, which makes it seem a bit stranger that the standard would be to write them in these different ways.

share|improve this question
Where do you have this information from? –  Pekka 웃 Sep 19 '11 at 14:30
A CSS book (amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/…) and Visual Studio's intellisense –  Jim Sep 19 '11 at 14:33

1 Answer 1

up vote 2 down vote accepted

Your assumption is incorrect. Both properties' shorthands except values to be in the order width, style, and color.


You can probably mix them as you wish and it'll still work, but that is the browser being lenient.

share|improve this answer
I thought that was the case, but I started questioning it when I hit a bug (unreproducible) where javascript was intermittently throwing an error when I tried to set css "outline:1px solid red" saying that it was invalid. It works usually, but "outline:red solid 1px" always works. –  Jim Sep 19 '11 at 14:36
All CSS shorthand properties allow their orders to be mixed up, as long as that doesn't result in an ambiguity. Thus both border and outline can be specified in any order, whereas font cannot. –  Spudley Sep 19 '11 at 14:38
@Jim: That makes no sense. You probably can't reproduce it because the error is to do with something else. –  thirtydot Sep 19 '11 at 14:39
@Spudley ah, fair enough - I can indeed not think of a possible ambiguity. Would be worthy of an answer on its own, wouldn't it? (Deleting mine soon) –  Pekka 웃 Sep 19 '11 at 14:40

Your Answer


