28

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.....?

Simon
  • 1,149
  • 6
  • 16
  • 32
  • 1
    Noting from your fiddle that you are trying to fit a rectangular image into a circle. Which bit of the image do you want to lose? – Paddy Aug 12 '14 at 15:17

5 Answers5

42

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

Benjamin
  • 2,612
  • 2
  • 20
  • 32
24

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).

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 1
    I've read through all the answers on this page and this is by far the smartest! Its also the most compact. And it uses no javascript! And it uses no css! Thanks @Roko C. Buljan! What image does it contain here? With which tool do you convert the graphic into base64 code? Thanks +1! – Sam Apr 24 '17 at 07:47
  • Thanks! Well, it actually uses CSS as you can see `style="` which is ofc best put into a separate stylesheet :) To convert an image to base64 you can see here: http://stackoverflow.com/a/17711190/383904 . – Roko C. Buljan Apr 24 '17 at 07:59
  • @mbomb007 yep, it exists (perhaps yesterday the server was down) - Anyways, the code matters here - one can always use it's own image, but thanks for reporting - now you can delete your comment... – Roko C. Buljan May 02 '19 at 13:11
13

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" />
arielnmz
  • 8,354
  • 9
  • 38
  • 66
  • yes this works if the width and height are same unless it will skew – Benjamin Aug 12 '14 at 15:12
  • @Benjamin How else is one supposed to make a circle if the width and height aren't the same? It's the same as your example but without using a parent div. – arielnmz Aug 12 '14 at 16:02
  • dude we can make a img a circle when we sizes a non-linear for instance if the image in 300X200 when we are abt to size it looks like skewed. I think you know wat im speaking abt. No offense here – Benjamin Aug 12 '14 at 16:04
  • The image is in the background, it doesn't matter what are the dimensions of the image, it's never distorted. – arielnmz Aug 12 '14 at 16:07
  • im not mentioning abt the background here and i didn't even downvote you. I accept what you did i'm just mention abt img src dude. – Benjamin Aug 12 '14 at 16:08
  • 1
    That's why I suggested putting the image in the background and not in the `src` attribute of the `img` element. – arielnmz Aug 12 '14 at 16:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59208/discussion-between-benjamin-and-arielnmz). – Benjamin Aug 12 '14 at 16:10
  • @arielnmz...and how would you use this approach if the page and images are generated dynamically? I don't think you can. I know the OP wasn't asking that but I am looking to do that. – dinotom Apr 17 '17 at 16:59
  • I assume you are using some sort of scripting for the dynamic content, in that case just change the background-image property of the element. Easy. – arielnmz Apr 17 '17 at 18:17
5

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;
}
Community
  • 1
  • 1
KnightHawk
  • 901
  • 9
  • 18
0

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

JRulle
  • 7,448
  • 6
  • 39
  • 61