CSS Outline
⭐ CSS Outline
In CSS Outline is a line drawn outside the border of an element.
It does not take space (no effect on layout), unlike borders.
1. Basic Outline
2. Outline Style
Same as border styles: solid, dashed, dotted, double, etc.
3. Outline Width
4. Outline Color
5. Outline Shorthand
(order → width style color)
6. Outline Offset
Creates space between the border and the outline.
Example (All Together)
⭐ Key Difference: Border vs Outline
| Border | Outline |
|---|---|
| Takes space | Does NOT take space |
| Part of the box model | Not part of the box model |
Can be rounded (border-radius) |
Cannot be rounded |
| Affects layout | Does not affect layout |
