outline: none VS outline: 0

Question

I was reading this question on disabling the dashed borders around <a> links. Some answers used outline: none, while some used outline: 0

Is there any difference between using outline: none and outline: 0?

Answer 1

According to MDN:

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration

So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color)

I used Firefox Developer Tools to find out the difference:

As you can see, they both use the default text color as the outline-color, and they both have outline-style set to none. The only difference is the outline-width:

• When the outline is 0, the outline-width is 0px
• When the outline is none, the outline-width is medium

That is the only difference between the two. You can use either one, they will both display the same way (since the outline-style is none, it does not matter how wide the outline is).