Search code examples
cssoutline

Is there a difference between "outline: none" and "outline: 0"?

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?

Solution

  • 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:

    <code>outline: 0</code> <code>outline: none</code>

    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).