Circle Images HTML
In this article, we will see how to make circle images in HTML. You can change the image to circular shape only after inserting the image. If you don’t know how to add an image, I will tell you in this article. And we can’t create a circle image without using CSS. So, we should use both HTML and CSS.
Step by Step Guide to make circle image
<html>
<head>
<title>Constructor Function</title>
</head>
<style type="text/css">
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center; }
img{
width: 500px;
clip-path: circle(); }
</style>
<body>
<img src="./nature.jpg">
</body>
</html>Output:
- In the above code, first, we have written the general syntax of HTML.
- Then in the <body>, We insert an image using the HTML <img> tag.
- Use <style> tag to write CSS style. In the <style>, We have written a style for the body to center the items. Then for <img> tag, if you use the “clip-path” attribute and give the value “circle()” your image will change to a circle shape.
- See the above output, the image is displayed circle shape.
img{
width: 500px;
border: 2px solid black;
border-radius: 50%; }
If you use the above coding, your circular image will not display correctly as in the image above. So, you can use the “clip-path” method for the best circle image.