Outline and Box-Shadow
Add focus outlines and shadow effects around elements using outline and box-shadow.
Outline and Box-Shadow is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
outline Property
outline draws a line outside the border. It does not affect layout — elements around it do not shift. The shorthand format mirrors border: width style color.
:focus {
outline: 3px solid royalblue;
}outline-offset
outline-offset moves the outline away from the border edge. Positive values push it outward; negative values move it inward (clipping effect).
:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 4px;
}outline vs border
Key differences:
- Outline does not affect layout flow
- Outline cannot be set per-side (no outline-top)
- Outline can be non-rectangular (follows focus ring shapes in some browsers)
- Outline is always outside the border
:focus-visible vs :focus
Prefer :focus-visible for keyboard focus rings. It shows the outline only when focus was received via keyboard, not mouse click — avoiding visual noise for pointer users while preserving accessibility.
:focus-visible {
outline: 3px solid royalblue;
outline-offset: 2px;
}
/* Remove mouse-click focus style */
:focus:not(:focus-visible) {
outline: none;
}box-shadow Basics
box-shadow adds a shadow effect around an element. The shorthand: offset-x offset-y blur-radius spread-radius color.
.card {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}box-shadow Values Explained
Each value in box-shadow:
- offset-x: horizontal shift (negative = left)
- offset-y: vertical shift (negative = up)
- blur-radius: softness (0 = sharp)
- spread-radius: grow/shrink shadow size
- color: shadow color (RGBA recommended)
.raised { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.deep { box-shadow: 0 16px 32px rgba(0,0,0,0.25); }inset Box Shadow
Add the inset keyword to draw the shadow inside the element, creating a pressed/sunken appearance.
.input:focus {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}Multiple Box Shadows
Comma-separate multiple shadows. They stack from front to back:
.badge {
box-shadow:
0 0 0 3px white,
0 0 0 5px royalblue;
/* white ring then blue ring */
}box-shadow vs filter: drop-shadow
box-shadow respects the box shape only. filter: drop-shadow() follows the rendered shape including transparency — ideal for PNG icons with transparent backgrounds.
.icon {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}Elevation System with box-shadow
Material Design and similar systems define multiple shadow levels for visual elevation. Map CSS variables to shadow values:
:root {
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.2);
}Animating box-shadow Efficiently
Animating box-shadow triggers repaint on every frame. For performance, animate opacity of a pseudo-element shadow or use filter: drop-shadow() which can be composited.
Quick Check
Which box-shadow keyword draws the shadow inside the element?
Recap
outline draws outside the border without affecting layout — use it for focus indicators. box-shadow adds depth shadows with offset, blur, spread, and color. Use inset for inner shadows. Multiple shadows can be layered with commas.
Frequently asked questions
Is the “Outline and Box-Shadow” lesson free?
Yes — the full text of “Outline and Box-Shadow” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Outline and Box-Shadow”?
Add focus outlines and shadow effects around elements using outline and box-shadow. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Outline and Box-Shadow” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.