Borders take space; outlines and shadows don't
All four look like they have a 10px ring, but only the border changed the box's size.
Borders are part of the box and take up space; border-radius rounds the corners; outlines and box shadows are painted outside the layout and never move anything, which makes them ideal for focus rings and depth.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a 100×100 .dot that is a perfect circle with a 4px solid border in the element's text colour (teal). Log its computed border-top-left-radius and border-top-color.
Give a button a custom focus ring that shows only for keyboard focus and doesn't shift the layout. Log its offsetWidth before and after calling focus().
Explain it without notes
What's the difference between border, outline and box-shadow?
Why does border: 3px blue show no border?
Explain box-shadow: inset 0 2px 4px 1px rgb(0 0 0 / 0.2) value by value.
How should you style focus indicators, and why not remove them?
Preview
Console
Nothing logged yet.Expected console output
plain offsetWidth: 100
bordered offsetWidth: 120
outlined offsetWidth: 100
shadowed offsetWidth: 100
border colour: rgb(190, 24, 93)