Outline vs Border in CSS

Outline and border in CSS might look similar at first but they are different from each other in the following ways -

Note: Outline is shown by black color while the border is shown by red color.

• Outlines are drawn outside of the element's content.

div {
  width: 420px;
  height: 200px;
  background: #eee;
  font-size: 150px;
  outline: 10px solid black;
  border: 20px solid red;
}

• Outlines don't take up space. If you place two elements side by side then their outlines will overlap.

• An outline is the same for all the sides. We can't set each side to a different width, color, or style. While each border can have a different style, color, and width.

div {
  outline: 10px solid black;
  border-width: 20px;
  border-style: solid;
  border-top-color: red;
  border-left-color: green;
  border-right-color: blue;
  border-bottom-color: orange;
}

• If we put an outline on an element without specifying the thickness of the outline (you can set that using the outline-width property), then it will take up the same amount of space as if we don't have an outline on the element. The default value is medium which is typically equivalent to 3px in desktop browsers.

div {
  outline: solid;
  border: 20px solid red;
}

• Outlines are usually rectangular but they don't have to. Using border-radius also changes the radius of an outline.

div {
  outline: 10px solid black;
  border: 20px solid red;
  border-radius: 50px;
}

• Border affects the size of the element while the outline doesn't.

div {
  outline: 10px solid black;
  border: 170px solid red;
}

You can also see the box-modal layout by inspecting the element in the browser.

Explore Further 🧠

• CodePen
• MDN Docs on outline and border