CODEWITHSUNDEEP
javascripthtmlimage
Lucas T.
Lucas T.

Reputation: 133

Transform an image into a circle

I'm trying to convert a "squared" image to a circle one.
The image is 48x48,its borders are squared.

I want to crop it with HTML/Javascript/CSS,to turn it into a circle.

Upvotes: 1

Views: 11924

Answers (3)

Sebastián
Sebastián

Reputation: 232

If you want to use just javascript this would work:

<img src='.../images/myImage.png' id="id">
<script>
document.getElementById('id').style.borderRadius = '50%';
</script>

Upvotes: 2

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

Put that image as a div's background-image then set the border-radius of the div to 50%. Simple is that. :)

Fiddle.

CSS of the div:

div {
    width: 48px;
    height: 48px;
    background: url(your_image_url.your_image_extension);
    border-radius: 50%; /*the magic*/
}

Upvotes: 9

Alexandru Nedelcu
Alexandru Nedelcu

Reputation: 1

Another way is to put the image into an editor and then cut the corners of the squares. Therefore, the part you don't want needs to be transparent. When you will put it in a webpage, the transparent part will inherit the color from behind.

Upvotes: 0

Related Questions