Circular Images with CSS

Making a circular image is quite simple in CSS thanks to border-radiusproperty.

Table of Contents

Square Image

We use this property if an image is square.

img {
  border-radius: 50%;
}

or

img {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}

Rectangle Image

If the image is not square, we need to crop it technically using a div then apply the effect.

<div class="img-wrapper">
  <img src="https://tltemplates.com/wp-content/uploads/2020/08/sword_blue.png" />
</div>
.img-wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #EEE;
}

.img-wrapper img {
  margin-left: -50px;
}

Use margin property to adjust which part of the image to show.

Leave a Comment

Your email address will not be published. Required fields are marked *