In this video, I break down CSS outline—basically a line drawn around an element outside the border edge. I use outlines mainly for visual effect and to highlight specific elements, especially when I’m working on focus states and accessibility. The key thing to remember is: an outline is not part of the element’s dimensions. It’s drawn outside the border and can even overlap nearby content, so you get emphasis without changing layout. I walk through the three core outline properties: outline-width, outline-style, and outline-color. For width, you can use thin/medium/thick or exact units like px, em, and rem (default is medium). For style, you’ve got options like dotted, dashed, solid, double, groove, ridge, inset, and outset (default is none). Color accepts any valid CSS color, and if you don’t set it, it uses the element’s current color. I also show how the outline shorthand lets you set width, style, and color together (in that order), and I share common pitfalls—like confusing outlines with borders, and forgetting to make focus outlines clearly visible. If you want extra clarity, outline-offset is a simple upgrade for spacing the outline away from the edge.