Rounded corners on rectangular image using CSS only - html

Question

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:
http://jsfiddle.net/v8g3y0na/
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Can this be done in only CSS.....?

Answer 1

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

Answer 2

Round image using CSS object-fit and border radius:
img{
width:80px;
height:80px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://picsum.photos/id/1011/800/400">
img with background image
For older browsers, using the <img> tag
<img alt="My image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
style="background: url(https://picsum.photos/id/1011/300/180) 50% / cover;
border-radius: 50%;
width:150px;">
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).

Answer 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(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);
#image {
display: block;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
border-radius: 200px;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />

Answer 4

http://jsfiddle.net/o8fwpug5/37/
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="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></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;
}

Answer 5

Put a DIV frame around the image: DEMO
<div class="rounded-corners">
<img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" 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