freeCodeCamp/guide/english/certifications/responsive-web-design/basic-css/make-circular-images-with-a-border-radius/index.md

---
title: Make Circular Images with a border-radius
---
# Make Circular Images with a border-radius

---
## Problem Explanation
We need to give our cat photo a ```border-radius``` of ```50%```.


---
## Solutions

<details><summary>Solution 1 (Click to Show/Hide)</summary>

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

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

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

</details>