CSS Box Shadow and Outline

Shadows add visual depth, while outlines often communicate keyboard focus without shifting layout.

box-shadow specifies offsets, blur radius, optional spread and color. Shadows are painted effects and do not alter the dimensions used for layout. outline draws a line around an element outside its border, normally without occupying box-model space.

Use outline-offset to separate a focus ring from a control. Never remove visible keyboard focus styling unless you provide an equally clear alternative.

Shadow painting extends beyond the border box; outline is a separate decorative line, particularly useful for focus feedback.

A soft shadow makes a panel appear raised.

HTML

<div class="elevated"><strong>Preview card</strong><p>Depth without extra border width.</p></div>

CSS

.elevated { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 8px 22px rgb(15 23 42 / 18%); }
.elevated p { margin-bottom: 0; }

Rendered output

Observe: The blurred shadow extends past the white panel but does not push neighboring elements.

Use Tab to focus this button.

HTML

<button class="focus-button">Keyboard focus</button>

CSS

.focus-button { padding: 11px 16px; border: 2px solid #0f766e; border-radius: 8px; background: #ccfbf1; }
.focus-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

Rendered output

Observe: The amber ring appears outside the button when keyboard focus is visible.

Shadow painting extends beyond the border box; outline is a separate decorative line, particularly useful for focus feedback.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A shadow does not reserve layout space, so nearby content may overlap its painted area.
• Removing focus outlines can make keyboard navigation difficult or impossible to follow.

Change the shadow blur from 22px to 4px. Next use Tab to inspect the focus ring.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use shadows subtly and reserve obvious focus indicators for keyboard users.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.