Workshop › Traffic light › Step 4 of 12

Round lamps

What we are doing

Each lamp becomes a grey circle: a square with border-radius: 50%.

```css
.lamp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #555;
}
```

What it means

• The same width and height make a square; border-radius: 50% turns a square into a circle.
• #555 is mid grey: a lamp that is off.

Your turn

Write the .lamp rule under the .light rule.

Skills: Styling with CSS

← Three lamps inside Stack them in the middle →

All steps

1. An empty box
2. Give the box a shape
3. Three lamps inside
4. Round lamps
5. Stack them in the middle
6. Red, yellow, green
7. Turn them off
8. A timeline for a lamp
9. Play the timeline
10. One after another
11. One setting for the speed
12. Build it yourself: a pole