CSS outline-style Property

What You’ll Learn

The outline-style property controls the line style of an outline. It is essential for focus rings and visual emphasis without changing layout.

Introduction

The outline-style property in CSS is used to define the style of an outline that is drawn around an element.

Unlike borders, outlines do not take up space and are not part of the element’s layout, but they are useful for creating visual emphasis or focus indicators.

This property is commonly used in conjunction with outline-width and outline-color to fully customize the appearance of an outline.

Definition and Usage

Set outline-style to anything other than none when you want a visible outline. Pair it with width and color for a complete focus or highlight effect.

For most accessibility-focused designs, solid is the clearest and most common choice.

📝 Syntax

The syntax for the outline-style property is simple. It specifies the style of the outline to be used.

element {
  outline-style: style;
}

Here, style can be one of the predefined keyword values that define the outline’s appearance.

Basic Example

button {
  outline-style: solid;
  outline-width: 2px;
  outline-color: #ff5733;
}

Syntax Rules

• Use keyword values such as solid, dashed, and dotted.
• none hides the outline even if width or color is set.
• 3D styles like groove and ridge are less common for focus rings.
• The outline shorthand can set style, width, and color together.

🎯 Default Value

The default value of the outline-style property is none. This means that if you don’t explicitly set a value, no outline will be drawn around the element.

Browsers may still show their own default focus outline on interactive elements until you style focus yourself.

💎 Property Values

Examples Gallery

From solid button outlines to dashed inputs and style comparisons.

<style>
  button {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #ff5733;
  }
</style>

<button>Click Me</button>

input:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: #2563eb;
}

a:focus-visible {
  outline-style: dotted;
  outline-width: 3px;
  outline-color: #9333ea;
}

.solid { outline: 2px solid #2563eb; }
.dashed { outline: 2px dashed #2563eb; }
.dotted { outline: 2px dotted #2563eb; }

Part of the outline property set

outline-style controls the line type only. Combine it with outline-width, outline-color, and optionally outline-offset, or use the outline shorthand.

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

♿ Accessibility

• Prefer solid for focus — Solid outlines are easiest for keyboard users to see.
• Do not use outline-style: none on :focus — unless you provide another visible focus indicator.
• Keep enough width — Thin dotted outlines may be hard to notice on some screens.
• Test contrast — Style alone is not enough; color and width matter too.

💡 Best Practices