Time to Style explainer

Aim of the puzzle: Add custom styles to your webpage.
Walk through of solution: In the CSS tab, some rules have been added for you, but the page is not yet complete.

To complete the puzzle:

In the body ruleset:

  • Set the background-color to rgb(232, 246, 255)

In the h1 ruleset:

  • Set the color to rgb(255, 140, 0)

In the button ruleset:

  • Set the border-radius to 5px

Then, add a new ruleset with img as its selector. For example:

img {


Inside the img ruleset:

  • Set the width to 200px
  • Set the height to auto

CSS Concepts: Rulesets, Rules, Selectors, Image Resizing, RGB colors


I’ve added border-radius: 5px; to the button ruleset, and I’m stumped why it won’t accept it!

Hey there, I’ve spent the afternoon fixing this bug, which appears to affect users on MS Edge and Firefox.

This puzzle’s completion logic works by querying the webpage for the button elements and then checking their borderRadius attribute to make sure they are set to 5px.

On Edge and Firefox, however, this attribute isn’t used, opting instead to set the radius of each corner individually. Therefore, the completion logic is checking the wrong thing.

We’ll have the fix released soon, so thanks for your patience! If you want to try completing it sooner, you can try temporarily switching browsers. I can confirm that the puzzle completes properly on Chrome and Safari.

Hope this helps! Let me know if you have any questions.

Thank you! I was going crazy.

I have the same issue with Firefox 69.0.2 (64-bit) on Ubuntu 18.04 LTS. Good to know you are working on fix!

Works with Chromium browser, thanks!