Radius shapes, styles and layered shadows
Click in the preview, then press Tab: the blue focus ring appears on the button (and follows its rounded corners). Clicking it with a mouse doesn't show the ring.
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.