CSS outline Property

Definition and Usage

The outline property is a shorthand for outline-width, outline-style, and outline-color. It draws a line outside the border edge and does not take layout space.

Use it for focus rings and emphasis. Unlike border, changing the outline will not push neighbors. Gap from the border is controlled separately with outline-offset.

CSS Syntax

Example: outline: 3px solid #2563eb;. Order of the three parts does not matter. Omit any part to use its initial value.

Property Values

How to Use outline

Pick a style first, then width and color. Add offset when you want space from the border.

1. Choose at least an outline-style (solid, dashed, …).
2. Add width and color in the same shorthand, or leave defaults.
3. For focus, style :focus or :focus-visible — never remove the ring without a replacement.
4. Use outline-offset to pull the ring away from the edge.

Live Preview

Change the full outline shorthand on a sample box. The thin gray border is the element edge; the outline sits outside it.

CSS Examples

Each snippet focuses on the outline shorthand. Extra styles stay minimal. Use Try It Yourself for a live editor.

<style>
  div {
    outline: 3px solid #2563eb;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>Outlined box</div>

<style>
  a {
    outline: none;
  }
  a:focus {
    outline: 3px dashed #d97706;
    outline-offset: 4px;
  }
</style>

<a href="#">Tab to focus me</a>

<style>
  .with-border {
    border: 6px solid #2563eb;
    padding: 12px;
  }
  .with-outline {
    outline: 6px solid #2563eb;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div class="with-border">Border grows the box</div>
<div class="with-outline">Outline does not</div>

Key Takeaways