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

<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
We need to give our cat photo a ```border-radius``` of ```50%```.

### Solution

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.