Why is there a need to add outline to CSS? Is outline redundant to the existing ones?

Question

Today I notice outline propery in CSS. However I don't know why it is added to CSS? What for? For me, margin, padding, border is enough.

Answer 1

outline creates a border outside the element's area, not adding to its width and not influencing the surrounding layout. From the quirksmode.org page on outline:

The outline is not actually a part of the box, it does not count in any way towards the width or height of a box.

That is a very useful feature indeed, because it allows e.g. highlighting an element on hover / focus actions without disturbing the neighboring elements. The slight dotted outline around focused links in Firefox is done using the outline property.

It's not supported by IE < 8, though, so it's only of limited everyday use.

• Quirksmode.org compatibility table

Answer 2

A quick google, http://www.google.com/search?sourceid=chrome&amp;ie=UTF-8&amp;q=outline+css, leads to this article which mentions that you can kill the dotted borders on anchors and such with outline.

To add, it's a border that doesn't take up space of the element and doesn't shift things around. Can be useful for debugging. Also not supported in IE6/IE7.

Answer 3

For this reason :)

Notice the dotted border around the image:

It is used to remove that.

Answer 4

It's usually used to indicate focus from what I understand. If you look at some people's CSS resets, they will do something like this:

*:focus { outline: none; }

You'll see it mostly around anchor tags if you just open up a page and starting pressing TAB a bunch of times you should see different links have the outline applied unless the stylesheet specifically says not to.