CSS outline-style Property

Definition and Usage

The outline-style property sets the line style of an element’s outline. An outline is drawn around the element, outside the border, and does not take up layout space.

The initial value is none, so nothing shows until you pick a visible style such as solid, dashed, or dotted. Pair it with outline-width and outline-color, or use the outline shorthand. For focus rings, solid is usually the clearest choice.

CSS Syntax

Property Values

How to Use outline-style

Pick a visible style first, then add width and color when you want them explicit.

1. Choose the element that needs an outline (often a button, link, or input on focus).
2. Set outline-style to a keyword such as solid or dashed. Without this, nothing draws.
3. Optionally set outline-width and outline-color, or use the outline shorthand.
4. Add outline-offset if you want a gap between the border and the outline.

Live Preview

Change outline-style on a box that already has width and color. Watch the line pattern update.

CSS Examples

Each snippet focuses on outline-style. Use Try It Yourself for a live editor.

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

<div>Solid outline</div>

<style>
  button:focus-visible {
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #2563eb;
    outline-offset: 2px;
  }
</style>

<button type="button">Save</button>

<style>
  div {
    outline-style: double;
    outline-width: 6px;
    outline-color: #0f766e;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>Double outline</div>

Key Takeaways