How To Create a Circle Images Using CSS

Prajwal Jadhav March 16, 2024

How To Create a Circle Images Using CSS


With CSS, it's easy and efficient to round off an image. The same can be very useful for making any kind of UI item: a profile picture, an icon, or whatever else round in shape. In this blog post, we are going to discuss how we can change an image from a regular rectangle to a perfect circle, using only HTML and CSS.

Step 1: HTML Structure 

First, you need to have an image element in your HTML that you would want to turn into a circle. The image could be of any size or shape since CSS would help in turning it into a circle.

Here's a basic example of what your HTML structure might look like:

<div class="circle-image">
    <img src="path-to-your-image.jpg" alt="Your Image">
</div>

In that structure, the <img> tag is going to be the image source, while the <div> element with a class of "circle-image" will be acting as a container in order to help us apply the CSS styling.

Step 2: CSS Style

In order for the rectangular image to turn into a circle, this CSS class has to be applied to the class circle-image. Here are the essential styles:

Width and Height: Ensure the container has equal width and height to create a perfect circle.

Border-Radius: This is the crucial property that transforms the square into a circle, set this to 50%.

Overflow: Set to hidden to ensure any part of the image that exceeds the circle is not visible.

Here is how your CSS should look:

.circle-image {
    width: 200px; /* or any size you want */
    height: 200px; /* should be the same as width */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block; /* to maintain the block level of div and allow sizing */
}

.circle-image img {
    width: 100%;
    height: auto;
    display: block; /* removes bottom space caused by inline elements */
}

It will make the image inside the .circle-image container a perfect circle.

Conclusion 

Creating an image that is circular in shape with CSS is a simple task and will greatly improve the visual look of your website. Following the above steps, you will make any images look more like a circle shape, with the standards of modern web design. Use a simple trick to apply style to your image in just a few lines of code. 
Tags: