Crop image with rounded border in CSS

Question

Is it possible to use CSS to crop an image so it has a rounded border?

Original image

Cropped image

How do I do this in CSS?

Answer 1

Introduction to border Radius:

Rounded borders in CSS are achieved through a property called border-radius which you can think about like an actual circle or a quarter of a circle for each corner that has some radius and crops the selected element sharp edges to match the quarter circle curve. This is what happens when you use it with pixel values or fixed values if used with % values such as border-radius: 50%; it's totally a different story.

here is a good resource to learn more about border-radius W3schools or mozilla

The solution:

The thing you want to achieve can be done like this:

CSS:

img.foo {    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

HTML:

<img class="foo" src="./foo.jpg" />

See border-radius.com for a generator.

Answer 2

Add a border radius border-radius:4px;

Answer 3

That crop image in css, use it as a `background.

Html:

<div class="cropped-image"></div>

CSS:

.cropped-image {
   width: 100px; // crop by width
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: url("your image url") no-repeat center; // show image center
}

OR use clip - http://www.w3.org/wiki/CSS/Properties/clip

img{
   clip: rect(0px, 50px, 50px, 0px);
}