freeCodeCamp Challenge Guide: Make Circular Images with a border-radius

Guide
1

Make Circular Images with a border-radius

Problem Explanation

We need to give our cat photo a border-radius of 50%.

Solutions

Solution 1 (Click to Show/Hide)

In class smaller-image add a border-radius of 50%:

  .smaller-image {
    width: 100px;
    border-radius: 50%;
  }

This class already assigned to our img element and making it perfectly circular.

4 Likes
2

Here is the correct code if anyone had trouble.

.red-text { color: red; } h2 { font-family: Lobster, Monospace; } p { font-size: 16px; font-family: Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; }
1 Like