Home » Solar Security Spot » Rounded Corners on Rectangular Image Using Css Only

Rounded Corners on Rectangular Image Using Css Only

Elena Rostova • • 3 min read
Rounded Corners on Rectangular Image Using Css Only

I'd like to create a round image from a rectangular image using radius-border.

Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.

See failed attempts here:

.rounded-corners-2{
    border-radius: 100px;
    height: 150px;
    width: 150px;

Can this be done in only CSS.....?

1

5 Answers

You do that by adding a parent div to your img and the code flows as follows

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}

Updated Demo

5

object-fit

img{
  width:80px;
  height:80px;
  border-radius: 50%;
  object-fit: cover;
}
<img src="">
Elena Rostova
Author

Elena Rostova

Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.