CSS

The CSS outline is similar to a border but has some key differences. It is drawn outside the element’s border and does not take up space in the box model.

---

1️⃣ What is CSS Outline?

• It is used to highlight elements without affecting layout.
• It does not take up space like border.
• It can be used for accessibility (focus states).

Basic Syntax

element {
    outline: <width> <style> <color>;
}

Example

.box {
    outline: 3px solid red;
}

📌 Difference Between Border & Outline

Property	Border	Outline
Takes space?	✅ Yes	❌ No
Part of box model?	✅ Yes	❌ No
Affects layout?	✅ Yes	❌ No
Position	Inside element	Outside border

---

2️⃣ CSS Outline Properties

Property	Description
outline-width	Sets the thickness of the outline
outline-style	Defines the type of outline (solid, dashed, dotted, etc.)
outline-color	Changes the color of the outline
outline-offset	Creates space between border & outline

---

3️⃣ outline-width Property

Defines the thickness of the outline.

Example

.box {
    outline-width: 5px;
}

📌 You can use:

• thin
• medium
• thick
• Specific values (px, em, etc.)

---

4️⃣ outline-style Property

Defines the style of the outline.

Outline Style	Example
solid	outline: 2px solid blue;
dotted	outline: 2px dotted red;
dashed	outline: 2px dashed green;
double	outline: 4px double black;
none	outline: none;

Example

.box {
    outline-style: dashed;
}

---

5️⃣ outline-color Property

Changes the color of the outline.

Example

.box {
    outline-color: purple;
}

📌 You can use:

• Color names (red, blue)
• Hex values (#ff0000)
• RGB (rgb(255, 0, 0))
• HSL (hsl(0, 100%, 50%))

---

6️⃣ outline-offset Property

Defines the gap between the element’s border and the outline.

Example

.box {
    outline: 3px solid orange;
    outline-offset: 5px;
}

📌 Larger values increase the gap.
📌 outline-offset: -5px; moves outline closer to the element.

---

7️⃣ Using outline for Accessibility

Outlines help users navigate a website, especially for keyboard users.

Example (Focus Outline)

button:focus {
    outline: 3px solid blue;
}

📌 This ensures keyboard users can see which button is selected.

---

8️⃣ Removing Default Outlines

Browsers apply default outlines to focused elements. To remove them:

button:focus {
    outline: none;
}

📌 Warning: Removing focus outlines can harm accessibility.

✅ Instead of removing, customize it for better visibility:

button:focus {
    outline: 2px dashed #ff5722;
    outline-offset: 3px;
}

---

9️⃣ Summary Cheat Sheet

Property	Effect
outline	Sets width, style, and color in one line
outline-width	Defines outline thickness
outline-style	Changes outline type (solid, dashed, etc.)
outline-color	Sets outline color
outline-offset	Creates space between border & outline
outline: none;	Removes outline (not recommended for accessibility)

---

🎯 Conclusion

✅ Outline does not take space and is useful for accessibility
✅ Use outline-offset to create spacing
✅ Avoid outline: none; without alternatives
✅ Customize focus styles for better UX