Outline & Opacity

Outline vs border

An outline looks like a border but sits outside the box and does not take up space (it never shifts your layout). Browsers use it to show keyboard focus.

<style>
  .a { border: 3px solid #4338ca; padding: 10px; margin-bottom: 10px; }
  .b { outline: 3px solid #ef4444; padding: 10px; }
</style>
<div class="a">border (affects layout)</div>
<div class="b">outline (does not affect layout)</div>

Both boxes get a 3px coloured line, but they behave differently. .a uses border, which is part of the box — it takes up space and can push neighbours around. .b uses outline, which is drawn on top, outside the box and reserves no space, so adding or removing it never shifts the layout. That is exactly why browsers use an outline (not a border) to show which element has keyboard focus — it can appear and disappear without the page jumping.

Opacity

opacity goes from 0 (invisible) to 1 (solid) and affects the whole element, including its content.

<style>
  .box { background:#4338ca; color:#fff; padding:14px; margin-bottom:8px; }
  .o7 { opacity: 0.7; } .o4 { opacity: 0.4; }
</style>
<div class="box">opacity: 1 (default)</div>
<div class="box o7">opacity: 0.7</div>
<div class="box o4">opacity: 0.4</div>

The three boxes step down in opacity: 1 (default, fully solid), 0.7 (slightly faded), and 0.4 (clearly see-through). Notice the text fades too — opacity affects the whole element and everything inside it, not just the background. If you only want a transparent background but solid text, use rgba() on the background colour instead (from the colours lesson).