How to Round-Off an Image with CSS

How to round-off an image with CSS

Apparently the shape is called an Squircle. After I found that term, it was quite easy to find someone who has already found a solution to creating the shape. I will leave the solution here, if somebody else needs it (definitely not as simple as border-radius):

Please be aware that I did NOT create this solution, all credit should be given to Mkmueller, https://codepen.io/mkmueller/, for his solution here: https://codepen.io/mkmueller/pen/wRJYKa

* {    box-sizing: border-box;}
body {    display: flex;    align-items: center;    justify-content: center;    height: 100vh;    margin: 0;}
svg.defs {    position: absolute;    width: 0;    height: 0;}
.squircle {    width: 75vmin;    height: 75vmin;    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;    clip-path: url(#squircle);}
.wrapper {    filter: drop-shadow(0 0 100px rgba(#000, .25));}

<svg class="defs">    <defs>        <clipPath id="squircle" clipPathUnits="objectBoundingBox">            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>        </clipPath>    </defs></svg>
<div class="wrapper">    <div class="squircle"></div></div>

Rounded corners on rectangular image using CSS only

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

CSS image corners don't round off consistently. Sometimes they do and sometimes they don't

Upon inspection, I've found that jQuery mobile has some CSS that affects the first and last elements in your list. You could modify the styles directly, but it's probably much better to override the jQuery mobile CSS by adding !important to the property (border-radius: 20% !important;). Doing that in your JSFiddle fixed it for me.

Here's a fixed example.

Rounded corners on background-image CSS

Looks like it's because the background image isn't expanding to the far corners of the element it's assigned to, so the border-radius isn't clipping the image. You likely just need to modify the background-size property, or potentially use a different image. I'm using background-size: cover here, which will cause the image to stretch to fill the element without distorting the aspect ratio.

h1 {  font-family: Lobster;  color: Orange;  font-size: 64px;  padding: 40px;  text-align: center;}
.header {  background-image: url("https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg");  height: 400px;  background-position: center center;  background-size: cover;  border-radius: 50px;  background-repeat: no-repeat;  margin: 20px;}

<div class="header">  <h1> Joe's Pizza </h1></div>

CSS rounded corners on an image problem

use two containers, both with the rounded corners (not the img), and don't forget the overflow: hidden on the inner:

example code here:
http://jsfiddle.net/jackJoe/YhDXm/

CSS Circular Cropping of Rectangle Image

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

This would work:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Rounded corners on images

You need to add a border-radius to that image: http://jsfiddle.net/WouterJ/48Y37/1/

---

Related Topics