CSS Outline

An outline is a line drawn outside an element's border. It looks similar to a border but behaves differently. The most important distinction is that an outline does not take up any space — it does not affect the element's size or the layout around it.

Outlines are most commonly seen when clicking on form inputs or links. The blue glow that appears around a focused button or text field is an outline added by the browser by default.

Outline vs Border

Outline Properties

• outline-width – Thickness of the outline.
• outline-style – Style of the outline line.
• outline-color – Color of the outline.
• outline-offset – Gap between the element's border and the outline.
• outline – Shorthand for width, style, and color.

outline-style Values

The same style values used for borders also work for outlines.

p { outline-style: solid; }
p { outline-style: dashed; }
p { outline-style: dotted; }
p { outline-style: double; }
p { outline-style: none; }   /* Removes the outline */

Just like border, the outline will not be visible unless outline-style is defined.

Outline Shorthand

button {
    outline: 3px solid orange;
}

The shorthand order is: width, style, color — exactly the same as the border shorthand.

outline-offset

The outline-offset property adds a gap between an element's border and its outline. This creates a floating outline effect.

button {
    border: 2px solid #3498db;
    outline: 2px dashed #e74c3c;
    outline-offset: 5px;  /* 5px gap between border and outline */
}

Positive values push the outline outward. Negative values draw the outline inside the border.

Removing the Default Focus Outline

Browsers automatically add an outline to focused interactive elements (buttons, inputs, links). While removing it improves visual design, it is important to replace it with a custom accessible style — removing it entirely harms keyboard and screen reader users who rely on visual focus indicators.

/* NOT recommended — removes accessibility */
button:focus {
    outline: none;
}

/* RECOMMENDED — replace with a custom accessible outline */
button:focus {
    outline: 3px solid #f39c12;
    outline-offset: 3px;
}

Outline for Debugging Layouts

A very practical use of outlines is debugging CSS layouts. Since outlines do not affect the layout (no space taken), they can be applied to any element to see its exact boundaries without disturbing the page structure.

/* Add this temporarily to see all element boundaries */
* {
    outline: 1px solid red;
}

This technique instantly reveals unexpected overflow, margin issues, and misaligned elements.

Complete Example

input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    outline: none;   /* Remove default browser outline */
}

input[type="text"]:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
    border-color: #3498db;
}

This creates a clean custom focus effect: when a user clicks on the text input, it displays a blue outline with a 2px gap from the border.

Summary

The CSS outline is drawn outside the border and does not affect the element's size or surrounding layout. It uses the same style values as borders and supports an outline-offset property for a floating effect. Outlines are primarily associated with keyboard focus accessibility. Removing the default outline without replacement is bad practice. Using outline: 1px solid red on all elements is a quick and non-destructive debugging technique.