CSS Outline and Outline-Offset Explained with Examples

Outline Properties

In CSS, the outline property is used to draw a line around elements - outside the border edge. Unlike border, outlines do not take up space and do not affect layout. They're mostly used to highlight elements visually.

Components of the Outline Property

CSS outline has three main parts:

outline-width: Sets the thickness of the outline.

outline-style: Defines the line pattern (e.g., solid, dashed).

outline-color: Sets the color of the outline.

Syntax:

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

Example: Different Outline Styles

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      outline-color: red;
      outline-width: 4px;
      margin: 10px;
      float: left;
      border: 2px solid lightgreen;
      padding: 5px 10px;
    }
  </style>
</head>
<body>

  <div class="box" style="outline-style: dashed;">Dashed Outline</div>
  <div class="box" style="outline-style: dotted;">Dotted Outline</div>
  <div class="box" style="outline-style: double;">Double Outline</div>
  <div class="box" style="outline-style: groove;">Groove Outline</div>
  <div class="box" style="outline-style: inset;">Inset Outline</div>
  <div class="box" style="outline-style: outset;">Outset Outline</div>
  <div class="box" style="outline-style: ridge;">Ridge Outline</div>
  <div class="box" style="outline-style: solid;">Solid Outline</div>

</body>
</html>

Output:

Outline Offset

The outline-offset property adds space between an element's border and its outline. This is useful for visual separation.

Syntax:

selector {
  outline: 3px solid red;
  outline-offset: 6px;
}

Example: Outline with Offset

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

Output:

Key Point

Outline does not affect layout, unlike borders.

Outline properties work on any element.

outline-offset improves visual clarity by separating the outline from the border.

Use outlines for highlighting, focus indicators, or form validation feedback.