[Edit]

CSS - difference between outline and border

1 contributors

2 contributions

0 discussions

3 points

Created by:

elmer

646

In this article, we would like to show you the difference between outline and border in CSS.

Quick answer:

An outline is a line drawn outside the element or element's border.

Outline doesn't affect on the web page layout, it means: outline doesn't shift area and sibling elements.

Outline and border visualization in CSS.

Practical examples

Edit

In the below example we compare three elements:

element with border,
element with outline
and with both of them.

As we can see, outline creates additional layout neutral 'border' around elements.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    * {
        box-sizing: border-box;  /* <--- used only to get better visualization */
    }
    
    body {
        display: flex;  /* <------------ used only to get better visualization */
    }
    
    div {
        margin: 20px;   /* <------------ used only to get better visualization */
        height: 130px;  /* <------------ used only to get better visualization */
        width: 130px;   /* <------------ used only to get better visualization */
    }
​
    .border {
        border: 5px solid lightgray;
    }
​
    .outline {
        outline: 15px solid #3085D6;  /* change 15px to 45px to see the effect */
    }
​
  </style>
</head>
<body>
  <div class="border">border</div>
  <div class="outline">outline</div>
  <div class="border outline">border + outline</div>
</html>