Difference between outline and border

Question

Hi Guys,

Does anybody know of any difference between 'border' and 'outline' properties in CSS? If there is no difference, then why are there two properties for the same thing?

Answer 1

Copied from W3Schools:

Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Answer 2

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:

1.Outlines do not take up space.

2.Outlines may be non-rectangular.

Answer 3

From W3 School Site

The CSS border properties allow you to specify the style and color of an element's border.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width.

If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

Check here for more information : http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Answer 4

As a practical example of using "outline", the faint dotted border that follows the system focus on a webpage (eg. if you tab through the the links) can be controlled using the outline property (at least, I know it can in Firefox, not tried other browsers).

A common "image replacement" technique is to use, for example:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

with the following in the CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

The problem being that when the focus reaches the tag, the outline heads off 1000em to the left. Outline can allow you to turn off the focus outline on such elements.

I believe that the IE Developer Toolbar is also using something like outline "under the hood" when highlighting elements for inspection in "select" mode. That shows well the fact that "outline" takes up no space.

Edit: As I am currently 1 rep short of being able to comment, this is in reply to Stewart's rightful distrust of the image replacement technique. It's the (now rather discredited for the very reason you mention) Phark method, which was an adaptation of Fahrner Image Replacement. I was simply using it as a rapid way of demonstrating a practical application of why someone might want to modify the focus outline :)

Answer 5

Further to other answers, outlines are usually used for debugging. Opera has some nice user CSS styles that use the outline property to show you where all the elements are in a document.

If you're trying to find out why an element isn't appearing where you expected or at the size you expected, add a few outlines and see where the elements are.

As already mentioned, outlines do not take up space. When you add a border, the element's total width/height in the document increases, but that doesn't happen with outline. Also you can't set outlines on specific sides like borders; it's all or nothing.

Answer 6

It is also worth noting, that W3C's outline is IE's border, since IE does not implement W3C box model.

In w3c box model, the border is exclusive of element's width and height. In IE it is inclusive.