LAST UPDATED: AUGUST 5, 2021
How to create rounded and circular images with CSS?
Images are an important element of the webpage. We frequently add images to the webpage and sometimes need to customize the image on the webpage so that it looks good.
In this article, we are going to create rounded images. To do that we can add rounded or circular images on the webpage using CSS.
Using CSS border
To create a rounded or circular image, we can add CSS border property border-radius and set border-radius:50%. For adding rounded corners to the image use border-radius: 16px. Let's learn by an example.
Example: Creating a circular image with CSS
In this example, we have created a circular image using border-radius property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circular image </h2>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627471486-101156.png" alt="image">
</body>
</html>
Output
Here is the output of the above program.
Example: Creating a rounded bordered image
In this example, we are creating rounded border images using CSS.
Conclusion
We can easily create a rounded or circular image using CSS. Use border-radius property to do so. We have explained the process with examples.
