Rounded corners on rectangular image using CSS only

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:

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

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

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
– Paddy, Commented Aug 12, 2014 at 15:17

Benjamin · Accepted Answer · 2019-05-02 08:50:19Z

43

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

edited May 2, 2019 at 8:50

answered Aug 12, 2014 at 15:09

Benjamin

2,6902 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

web-tiki Over a year ago

the issue here is that the image isn't centered in the circle.

Benjamin Over a year ago

Yep it works like that it actually crops the img to by inheriting the size of your parent div.

Benjamin Over a year ago

@web-tiki you can position your img follow this link jsfiddle.net/benjaminthomas/v8g3y0na/7

web-tiki Over a year ago

The technique you are using to center the image in the container won't work for all images. If they have different widths, it will fail.

Benjamin Over a year ago

Updated the url @mbomb007

Roko C. Buljan · Accepted Answer · 2022-12-30 13:35:16Z

30

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

edited Dec 30, 2022 at 13:35

answered Aug 12, 2014 at 15:46

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

3 Comments

Sam Over a year ago

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!

Roko C. Buljan Over a year ago

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: stackoverflow.com/a/17711190/383904 .

Roko C. Buljan Over a year ago

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

arielnmz · Accepted Answer · 2017-04-17 18:38:29Z

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

edited Apr 17, 2017 at 18:38

answered Aug 12, 2014 at 15:11

arielnmz

9,21510 gold badges43 silver badges73 bronze badges

9 Comments

Benjamin Over a year ago

yes this works if the width and height are same unless it will skew

arielnmz Over a year ago

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

Benjamin Over a year ago

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

arielnmz Over a year ago

The image is in the background, it doesn't matter what are the dimensions of the image, it's never distorted.

arielnmz Over a year ago

That's why I suggested putting the image in the background and not in the src attribute of the img element.

|

Community · Accepted Answer · 2017-05-23 12:18:09Z

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;
}

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Aug 12, 2014 at 15:23

KnightHawk0811

9319 silver badges18 bronze badges

Comments

JRulle · Accepted Answer · 2014-08-12 15:11:54Z

1

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

answered Aug 12, 2014 at 15:11

JRulle

7,5666 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Rounded corners on rectangular image using CSS only

5 Answers 5

5 Comments

Round image using CSS `object-fit` and border radius:

`img` with background image

3 Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Round image using CSS object-fit and border radius:

img with background image

3 Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Round image using CSS `object-fit` and border radius:

`img` with background image