Difference between outline and border

Question

From: 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.

In addition to some other answers... here are a few more differences I can think of:

1) Rounded corners

border supports rounded corners with the border-radius property. outline doesn't.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

FIDDLE

(NB: Although firefox has the -moz-outline-radius property which allows rounded corners on outline... this property it is not defined in any CSS standard, and is not supported by other browsers (source))

2) Styling one side only

border has properties to style each side with border-top:, border-left: etc.

outline can't do this. There's no outline-top: etc. It's all or nothing. (see this SO post)

3) offset

outline supports offset with the property outline-offset. border doesn't.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

FIDDLE

Note: All major browsers support outline-offset except Internet Explorer

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.

tldr;

The W3C explains it as having the following differences:

• Outlines do not take up space.
• Outlines may be non-rectangular.

Source

Outline should be used for accessibility

It should also be noted that outline's primary purpose is accessibility. Setting it to outline: none should be avoided.

If you must remove it it maybe a better idea to provide alternative styling:

I’ve seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.

Source: "Do Not Remove the Outline from Link and Form Controls", 365 Berea Street

---

More Resources

• http://outlinenone.com/

A practical use of outline deals with transparency. If you have a parent element with a background, but want a child element's border to be transparent so that the parent's background will show through, you must use "outline" rather than "border." While a border can be transparent, it will show the child's background, not the parent's.

In other words, this setting created the following effect:

outline: 7px solid rgba(255, 255, 255, 0.2);

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