📌 Introduction

The outline-style property in CSS defines the pattern or style of an element’s outline. Outlines are drawn *outside* the element’s border and do not affect the layout or the element’s size. They are primarily used for accessibility (focus states), interactive UI elements, debugging, and visual emphasis. ✨

🎯 Why Use outline-style?

✨ Syntax

selector {
  outline-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset;
}

🧩 Available Outline Styles

1. none

Disables outlines — not recommended for accessibility.

2. solid

A single solid line — commonly used for focus states.

3. dashed

A broken line of dashes — useful for emphasis.

4. dotted

Series of dots — subtle and decorative.

5. double

Two parallel lines — adds high visual contrast.

6. groove / ridge

3D-like effects influenced by outline color.

7. inset / outset

Create pressed-in or popped-out effects.

📏 All Styles Example

.none   { outline-style: none; }
.solid  { outline-style: solid; }
.dashed { outline-style: dashed; }
.dotted { outline-style: dotted; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge  { outline-style: ridge; }
.inset  { outline-style: inset; }
.outset { outline-style: outset; }

🧩 Per-Side? (Important)

Outlines are different from borders — they surround the whole element. Therefore, you cannot set outline-style per side. There's only ONE outline around the element.

🔥 Practical Examples

1. Default Focus Ring

button:focus {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #007bff;
}

2. Dashed Outline for Emphasis

.highlight {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: orange;
}

3. Dotted Outline for Forms

input {
  outline: 2px dotted teal;
}

4. Double Outline for Strong UI Feedback

.important {
  outline: 4px double red;
}

5. Groove Outline for 3D Effect

.panel {
  outline: 4px groove #666;
}

📘 outline-style vs border-style

🖼️ Visual Demo

🎉 Conclusion

The outline-style property determines how an outline looks — its pattern and visual structure. Combine outline-style with outline-width and outline-color to create accessible, beautiful interfaces. From solid focus rings to dashed highlights and double outlines, this property brings clarity and interaction cues to your UI. 🚀