October 7, 2022

How to Create Circular Image in HTML and CSS

In this tutorial, we will learn how to create circular image in HTML and CSS. When you are working on a website, you want to display an image in a circular shape and it is very easy to do by using CSS.

To create a circular image, we have to use the CSS border-radius property. This property is mainly used to modify the borders of an element. Please note that to create a circular image, you have to keep the same height and width of the image.

In the following example, we will create a circular image using CSS. Please have a look over the code example and the steps given below.

HTML

We have 2 elements (div and img) in the HTML file. The div element is just a wrapper for the img element.
In img element, we have src and alt attributes. The src attribute value has been set to the path of an image (Apple Jam.jpg), which is located in the image directory and the alt attribute value has been set to the name of the image.
In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Image</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <img src="./img/Apple Jam.jpg" alt="Apple jam">
    </div>
</body>

</html>

CSS

We are selecting the div element and setting the value of the text-align property to center. This is required to horizontally center align the image.
We are selecting the img element and setting the height and width property to 200px and the border-radius property to 50%. As a result, it will change the image shape to circular.

div {
    text-align: center;
}

img {
    height: 200px;
    width: 200px;
    border-radius: 50%;

}

You May Also Like: