Skip to main content

CSS Border — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Border 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 a solid border

    easy10 min

    Give #box a 2px solid red border.

  2. 2

    Border one side only

    easy10 min

    Give #box a 4px solid bottom border.

  3. 3

    Round the corners

    easy10 min

    Give #box an 8px border radius.

  4. 4

    Use a dashed border

    easy10 min

    Give #box a 3px dashed border.

  5. 5

    Make a circle

    medium10 min

    Give #box a 50% radius and equal width and height.

Find the bug(5)

  1. 1

    Fix the border with no style

    easy8 min

    Without a style the border has no width at all.

  2. 2

    Fix the misspelled style

    easy8 min

    "solidd" is not a valid border style.

  3. 3

    Fix the wrong radius property

    easy8 min

    The property is border-radius, not corner-radius.

  4. 4

    Fix the border on the wrong side

    easy8 min

    The border was applied to the top instead of the bottom.

  5. 5

    Fix the missing border width

    easy8 min

    A border declared with only a colour renders at the default width.

Ready to write the code?

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

Open the workspace