How to create a Circular/Rounded images using CSS ? Last Updated : 20 Dec, 2020 Comments Improve Suggest changes 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 create a Circular/Rounded images 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 type of graph that displays data in a circular shape and is generally used to show percentage or proportional data. The percentage represented in the graph by each category is provided near the corresponding slice of one portion of the pie chart. These charts are very good for displ 2 min read How to Create an Image Overlay Icon using HTML and CSS ? Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us 3 min read How to Create Animated Loader Ring using HTML and CSS? An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use 2 min read How to create shape using CSS clipping ? You can easily create shapes using the clip-path property in CSS. Actually clip-path property lets you clip an element to a basic shape. The basic shape like circle, ellipse, the polygon can be achieved using the <basic-shape> property value of clip-path which will be discussed further in this 3 min read Like