Outline Style

You will be able to use CSS outline to draw a visible line around an element, especially on focus, without changing the element's size or pushing nearby content.

What it is

An outline is a line drawn around an element's border edge. It is separate from border and does not take part in layout, so adding or changing it does not change the element's width, height, or position. The mental model is: border is part of the box; outline is a ring painted around the box.

Related terms include outline-color, outline-style, outline-width, outline-offset, and focus indicators such as :focus and :focus-visible. A positive outline-offset moves the outline away from the element; a negative value moves it inward.

Why it matters

• It gives keyboard users a clear focus indicator without shifting page content.
• It can highlight an element temporarily, such as on hover, focus, or validation.
• It avoids layout jumps that can happen when adding a border to an element that previously had none.
• It can be offset from the border to create a visible ring around buttons, inputs, or cards.
• It supports accessibility when used with sufficient color contrast.

Syntax or steps

The smallest useful pattern is the outline shorthand:

selector {
  outline: width style color;
}

For example:

input:focus {
  outline: 2px solid blue;
}

The style value is required for a visible outline. If you omit it, the outline may be none. You can also set individual properties:

input:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
  outline-offset: 2px;
}

Example

<style>
  .search {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .search:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
  }
</style>

<input class="search" type="text" placeholder="Search">

Part by part:

• .search styles the input normally, including a border and padding.
• .search:focus applies only when the input receives focus.
• outline: 3px solid #1a73e8; draws a 3-pixel solid blue ring.
• outline-offset: 2px; moves the ring 2 pixels away from the border, creating a gap.

Common mistakes

• Removing focus outlines without a replacement. Do not use outline: none; unless you provide another visible focus style, such as a border or box-shadow with good contrast.
• Forgetting outline-style. A width and color alone may not show an outline; include a style such as solid, dashed, or dotted.
• Assuming outline takes space. It does not affect layout, so it can overlap nearby elements. Use spacing or outline-offset carefully.
• Using a low-contrast color. A focus ring must be visible against the background and the element itself.

When to use it

Use outline for focus and temporary highlighting. Use border when the line should be part of the element's box and affect layout. Use box-shadow when you need a decorative glow or custom ring that can be blurred or layered.

Practice

Guided exercise: Add a visible focus outline to a button that is 2 pixels wide, solid, green, and offset by 3 pixels.

button:focus {
  outline: 2px solid green;
  outline-offset: 3px;
}

Challenge: Make the outline appear only for keyboard focus, not mouse clicks. Hint: use :focus-visible instead of :focus.

Quick check

Question: Why is outline often better than border for focus styles?

Answer: Because outline is drawn outside the border edge and does not affect layout, so the element does not resize or shift when focused.

Summary

CSS outline is a non-layout ring around an element, ideal for focus indicators and temporary highlights. Remember that it needs a style, can be offset, and should always preserve visible accessibility.