CSS Outline Property, Syntax, Differences from Border and Examples

CSS Outline

The outline property in CSS is used to draw a line outside the element's border without affecting the layout. Although it looks like a border, it works differently in several important ways.

Key Characteristics of Outline

Does not affect layout:

The outline does not take up space in the document flow, unlike borders. It is drawn outside the border edge and does not push other elements.

Non-rectangular support:

By default, outlines can follow the shape of elements, including rounded corners.

No individual side control:

Unlike borders, you cannot set outline on specific sides (top, right, etc.) it applies uniformly to all sides.

Syntax:

selector {
  outline: [outline-width] [outline-style] [outline-color];
}

Properties:

outline-width: Width of the outline. Can be values like thin, medium, thick, or units like px, em, rem, etc.

outline-style: Style of the line can be solid, dotted, dashed, double, etc.

outline-color: The color of the outline. Can be a color name (red), HEX (#ff0000), RGB, or HSL.

Difference Between Border and Outline

Feature	border	outline
Definition	Surrounds an element inside the layout box	Drawn around an element, outside the border
Affects Layout	Yes	No
Position	Inside the box model	Outside the border edge
Side Control	Yes (e.g., border-top)	No (applies to all sides)
Offset Support	No	Yes, using outline-offset
Shorthand	border	outline
Common Properties	border-width, border-style, border-color, border-radius	outline-width, outline-style, outline-color, outline-offset

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: #eee;
      border: 3px solid Lightgreen;
      padding: 5px 10px;
      outline-width: 3px;
      outline-style: solid;
      outline-color: red;
    }
  </style>
</head>
<body>
  <div class="box">Welcome to Quipo</div>
</body>
</html>

Output:

Key Point

Use outline when you want to highlight elements (e.g., during focus or validation errors) without affecting layout.

outline is great for accessibility, such as showing focus on form fields.

Combine outline with outline-offset for extra visual control.