What is the difference between outline and border CSS properties?

user_140970 0
Viewed 99013

What is the difference between border and outline properties in CSS?

If there is no difference, then why are there two properties for the same thing?

outline border css
16 Answers

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.

user_743140

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

user_7037170

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.

DisgruntledGoat_379470

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

user_1204570

Border is created inside the element, where as outline is created outside the element. So border is computed along with the width and height of the element, while outline draws outside the element.

Demo

user_57698170

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.

user_1419060

Differences between border and outline:

Border is part of the box model so it counts against the element's size. Outline is not part of the box model so it doesn't affect nearby elements.

Demo:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}
<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.

user_136332980

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.

user_1413040

think about outline as a border that a projector draw outside something as a border is an actual object around that thing.
a projection can easily overlap but border don't let you pass.
some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!)
but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element but the problem is if you don't do spacing properly it would overlap with other contents.

to make it short:
outline pros:
it doesn't mess with spacing and positions
cons:
high chance of overlapping

user_80755080

Google web.dev has a good explaintion for Box Model.

The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.

The margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.

user_82579730

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

user_1350200
Related