Book a free demo

Learn CSS · lesson 8 of 8

Rounded corners and hover

Round the button's corners with border-radius, and change its background-color on button:hover.

Learn

border-radius rounds corners. The :hover part of a selector applies only while the mouse is over the element, so button:hover styles the button when you point at it.

Your task

Round the button's corners with border-radius, and change its background-color on button:hover.

← Flexbox: items in a row

CSS

FAQ

Rounded corners and hover: common questions

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

  • Tell us the learner’s age or grade and goals
  • We’ll suggest a suitable class or learning path
  • We’ll confirm format, timing and fees with a parent or guardian

For a child’s class, please have a parent or guardian send the enquiry. Avoid sharing passwords or sensitive personal details.

We’ll use your details only to respond to this request.

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay
Chat on WhatsApp
Esc

Try