CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 1169

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:

http://jsfiddle.net/v8g3y0na/

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

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

Upvotes: 30

Views: 89460

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206595

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

Upvotes: 29

Benjamin
Benjamin

Reputation: 2670

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

Upvotes: 43

arielnmz
arielnmz

Reputation: 9155

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

Upvotes: 13

KnightHawk0811
KnightHawk0811

Reputation: 931

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

Upvotes: 5

JRulle
JRulle

Reputation: 7568

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

Upvotes: 1

Related Questions