How to create a Circular/Rounded images using CSS ? Last Updated : 20 Dec, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will create a rounded image with CSS. It can be done by using the CSS border-radius property. This property is mainly used to make round shapes. It contains a numeric value in the form of pixels. Example 1: HTML <!DOCTYPE html> <html> <head> <style> img { border-radius: 58%; } </style> </head> <body> <h2>GeeksForGeeks</h2> <h2> How to create a Circular/ Rounded images using CSS? </h2> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="200" height="160" border="5"> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <style> img { border-radius: 38%; } </style> </head> <body> <h2>GeeksForGeeks</h2> <h2> How to create a Circular/ Rounded images using CSS? </h2> <img src="img_avatar.png" alt="GeeksforGeeks logo" width="200" height="160" border="5"> </body> </html> Output: Supported Browsers: Google ChromeInternet ExplorerFirefoxSafariOpera Comment More infoAdvertise with us Next Article How to make rounded corner using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Properties Similar Reads How to make rounded corner using CSS ? Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded. In this article, we will explore how to use the border-radius pr 3 min read How to Create Avatar Images using HTML and CSS ? This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu 1 min read How to create circular progress bar using SVG ? In this article, we will learn how to create a circular progress bar using SVG. Let us begin with the HTML part. In the SVG circle, the cx and cy attributes define the x and y coordinates of the circle. If cx and cy are not taken to the circle's center, it is set to (0,0). The r attribute defines th 3 min read How To Create a Thumbnail Image using HTML and CSS ? The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye 1 min read How to Create a Rounded Card in Tailwind CSS ? A rounded card is a design used in web development, featuring rounded corners and typically containing content or information within a defined boundary. To create a rounded card in Tailwind CSS, use the rounded utility class along with the bg-white and shadow-md classes for a clean, rounded look. Sy 2 min read How to create a Pie Chart using HTML & CSS ? A Pie Chart is a circular graph that shows data as percentages of a whole, with each slice representing a category. For example, Education 40%, Healthcare 30%, Transportation 20%, and Others 10%. It’s ideal for visualizing and comparing parts of a whole in a clear, simple way.Pie Chart using HTML CS 3 min read Like