CODEWITHSUNDEEP
imagecss
Sidetik
Sidetik

Reputation: 620

Crop image with rounded border in CSS

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

Original image

enter image description here

Cropped image

enter image description here

How do I do this in CSS?

Upvotes: 9

Views: 28236

Answers (6)

sancho1952007
sancho1952007

Reputation: 1

<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a">
<style>
img{
    width: 20%;
    border-radius: 50px;
}
</style>

You Can Use width to specify the width of the image; And, Use border-radius to specify the border radius (corner's radius) of the Image...

Upvotes: 0

Joren
Joren

Reputation: 3297

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.

Upvotes: 13

maximkou
maximkou

Reputation: 5332

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

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

By crop, if you want to make it like the image you have i.e https://i.sstatic.net/UrsLN.png, you can do it in two ways.

  1. Add a border-radius by CSS
  2. Crop that image to that borders roundness in your image editing software and save it as gif or png for transparency.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to this

-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;

Upvotes: 0

Josh M
Josh M

Reputation: 992

Add a border radius border-radius:4px;

Upvotes: 2

Related Questions