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="">

img with background image

For older browsers, using the <img> tag

<img alt="My image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

The trick is to set a transparent px for the src (to prevent broken image icon) and do the best CSS3 and background-size has to offer (cover).

3

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

Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-position attribute.

Updated to address concerns about size, roundness, skewing and dynamically loaded content.

setTimeout(function() {	$("#image").css("background-image", "url()");
}, 3000);

#image { display: block; background-image: url(""); border-radius: 200px; width: 200px; height: 200px; background-size: cover; background-position: center;
}

<script src=""></script>
<img />

9

This is a slight update of a previous answer. I liked the other answer, but this is a bit more streamlined and gives a pixel based width for the wrapper. This way it is easier to see and change the dimensions for your own purposes.

HTML:

<div><img src="" /></div>

CSS:

div{ height:200px; width:200px; position:relative; border-radius:100%; overflow:hidden;
}
img{ position:absolute; left:-50%; right:-50%; top:0; margin:auto; height:100%; width:auto;
}

Put a DIV frame around the image: DEMO

<div> <img src="" width="200">
</div>
div.rounded-corners { height: 150px; width: 150px; border-radius: 50%; overflow: hidden;
}

note: you don't need your img.rounded-corners style anymore

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy