Skip to main content

CSS Outline — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Outline lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add an outline

    easy10 min

    Give #box a 3px solid outline.

  2. 2

    Use a dashed outline

    easy10 min

    Give #box a 2px dashed outline.

  3. 3

    Offset the outline

    easy10 min

    Push the outline 4px away from the box.

  4. 4

    Colour the outline

    easy10 min

    Give #box a red outline.

  5. 5

    Outline without moving the layout

    medium10 min

    Add a 5px outline and confirm the box keeps zero border width.

Find the bug(5)

  1. 1

    Fix the removed focus outline

    easy8 min

    Removing the outline entirely harms keyboard users.

  2. 2

    Fix the border used as an outline

    easy8 min

    A border shifts the layout; an outline does not.

  3. 3

    Fix the outline with no style

    easy8 min

    Without a style the outline never renders.

  4. 4

    Fix the wrong offset property

    easy8 min

    The property is outline-offset, not outline-gap.

  5. 5

    Fix the invalid outline colour

    easy8 min

    "reddish" is not a colour, so the declaration is dropped.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace